-1
엘리먼트를 삭제할 수 없도록 강조하려고합니다. 목록에는 자식 및 부모 형식 요소가 있고 적절한 클래스도 넣었습니다. 상황이 있지만 이벤트 버블 링을 방지 할 수는 없습니다. 코드 아래에서 시도했지만 어떻게 든 작동하지 않습니다. drappable이 drappable 위로 드래그되는 동안 모든 요소 (부모 클래스 사용)는 노란색 배경을 깜박이기 시작합니다. 나는 이것을 어떻게 멈출 지 모른다. stopProcagation(), stopImmediatePropagation() over 함수를 시도했지만 아무 것도 해결되지 않았습니다. 내 코드는 JQuery가 이벤트 버블 링을 방지 할 수 없습니다.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<style>
#NodeDetails {
border: solid 1px red;
width: 40%;
height: 200px;
overflow-y: auto;
overflow-x: auto;
font-size:12px;
float:right;
}
#TestContainer {
border: solid 1px red;
width: 40%;
height: 400px;
overflow-y: auto;
overflow-x: auto;
float:left;
cursor:default;
}
ul{
list-style-type: none;
text-align: left;
padding-left: 15px;
padding-top: 3px;
}
li{
padding-bottom: 0px;
padding-top: 1px;
display:inline;
}
img {
vertical-align: top;
padding-right: 0px ;
margin-right: 0px ;
height: 15px;
width: 15px;
}
img .testcat {
}
span {
vertical-align: top;
padding-left: 5px ;
padding-right: 5px ;
color: black;
font-size:15px;
}
.nochild {
font-size:10px;
}
.droppable-below {
border-bottom: 2px solid blue;
margin-top: 0px;
margin-bottom: 5px;
}
.droppable-in {
border: 1px solid black;
background-color: yellow;
}
/*
.TestContainer, .TestContainer ul, .TestContainer li {
position: relative;
}
.TestContainer ul {
list-style: none;
padding-left: 12px;
}
.TestContainer li::before, .TestContainer li::after {
content: "";
position: absolute;
left: -12px;
}
.TestContainer li::before {
border-top: 2px solid #000;
top: 5px;
width: 6px;
height: 0;
margin-left: 6px;
}
.TestContainer li::after {
border-left: 2px solid #000;
height: 170%;
width: 0px;
top: -8px;
margin-left: 6px;
}
.TestContainer ul > li:last-child::after {
height: 8px;
} */
</style>
</head>
<body>
<div ng-app="mainApp">
<div ng-controller="TreeController">
<div id="TestContainer" class="TestContainer">
<collection collection='testdata'></collection>
</div>
</div>
</div>
</body>
<script>
var mainApp = angular.module("mainApp", [])
mainApp.directive('collection', function() {
return {
restrict: "E",
replace: true,
scope: {collection: '='},
template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>"
}
})
mainApp.directive('member', function ($compile) {
var NewChild = "<li><img class=opcl ng-src={{PlusMinusImage}} ng-click=ShowHideFunc()></img><img class=testcat ng-src={{C15Image}}></img><span ng-click=ShowDetailsFunc()>{{member.TagName}}</span></li>";
var linkerfunc = function(scope, element, attrs) {
var collectionSt = '<collection collection="member.children"></collection>';
$compile(collectionSt)(scope, function(cloned, scope) {
//element.css("background-color", "#ff00ff");
if (scope.member.children.length === 0){
$(element[0]).children().first().remove()
$(element[0]).addClass("child");
} else
{
$(element[0]).addClass("parent");
}
element.attr('xml-path', scope.member.TagPath);
element.append(cloned);
});
scope.ShowHideFunc = function() {
scope.ShowHideCtrlFunc(element,event);
event.stopImmediatePropagation();
};
}
return {
restrict: "E",
replace: true,
scope: {member: '=', ShowHideCtrlFunc : '&', ShowDetailsCtrlFunc : '&'},
template: NewChild,
controller: 'TreeController',
link: linkerfunc
}
})
mainApp.controller('TreeController', function ($scope,$http) {
$scope.testdata = [{"TagName":"LandXML","TagPath":">MyRootNode>ChildItems>LandXML","children":[{"TagName":"Units","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Units","children":[{"TagName":"Imperial","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[1]>Imperial","children":[]},{"TagName":"Project","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Project","children":[]},{"TagName":"Application","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Application","children":[{"TagName":"Author","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[2]>Author","children":[]},{"TagName":"Alignments","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Alignments","children":[]},{"TagName":"Roadways","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Roadways","children":[{"TagName":"Roadway1","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[1]","children":[]},{"TagName":"Roadway2","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[2]","children":[]},{"TagName":"Roadway3","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[3]","children":[]},{"TagName":"Roadway4","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[4]","children":[]},{"TagName":"Roadway5","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[5]","children":[]}]}]}]}]},{"TagName":"Surfaces","TagPath":">MyRootNode>ChildItems>Surfaces","children":[{"TagName":"Surface1","TagPath":">MyRootNode>ChildItems>ChildItems[2]>Surface1","children":[]},{"TagName":"Surface2","TagPath":">MyRootNode>ChildItems>ChildItems[2]>Surface2","children":[]}]}]
$scope.PlusMinusImage = '../Images/Plus15.png';
$scope.C15Image = '../Images/C15.png' ;
$scope.ShowHideCtrlFunc = function(element,event) {
//console.log("in function ShowHideCtrlFunc");
if ($scope.PlusMinusImage === '../Images/Plus15.png') {
$scope.PlusMinusImage = '../Images/Minus15.png';
} else {
$scope.PlusMinusImage = '../Images/Plus15.png';
}
$(element).children().last().toggle();
event.stopImmediatePropagation();
};
makedraggable()
});
function makedraggable() {
var myimg = $('<img/>').attr({
src:"images/whitebriefcase4.png"
})
$("li").draggable({
containment: '#TestContainer',
cursorAt: { top: -0, left: -15 },
helper: function() {
return $("<div></div>").append(myimg);
},
revert: "invalid",
drag: function(event,ui) {
$(this).find('span').first().css({"font-weight": "bold", "background-color": "lightblue"});
},
stop: function(){
$(this).find('span').first().css({"font-weight": "normal", "background-color": "white"});
},
drop: function (event){
console.log("I am dragged and dropped")
//event.stopImmediatePropagation();
}
});
$('.parent').droppable({
greedy: true,
hoverClass: "droppable-in", //, border: 5px solid red;
/*
over: function() {
//$(this).children().first().next().css({"border": "1px solid black", "background-color": "yellow"})
$(this).css({"border": "1px solid black", "background-color": "yellow"})
//console.log($(this).parent());
},
out: function() {
$(this).css({"border": "none", "background-color": "white"})
}, */
drop: function(event, ui) {
//console.log($(ui.draggable).text());
//console.log($(this).next());
$(this).next().append($(ui.draggable));
$(this).css({"border": "none", "background-color": "white"})
}
});
};
</script>
</html>
hoverClass에
droppable-in 클래스를 사용
[Minimal, Complete, Verifiable Example] (https://stackoverflow.com/help/mcve)로 분류해야합니다. –