我正在尝试突出显示元素而不是droppable。该列表具有子类型和父类型元素，我也放置了适当的类。事情已经找到，但我无法防止事件冒泡。我试过下面的代码，但没有以某种方式工作。当draggable被拖放到droppable上时，所有元素（带有父类）开始闪烁黄色背景。我不知道如何阻止这一点。我在over函数中尝试了stopPropagation（），stopImmediatePropagation（）但没有任何效果。我的代码如下，
<!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>
请帮忙
答案 0 :(得分：0)
您在droppable-in中使用了hoverClass类，如下所示：
$('.parent').droppable({
greedy: true,
hoverClass: "droppable-in",
...
});
此类定义如下，并导致yellow背景。
.droppable-in {
border: 1px solid black;
background-color: yellow;
}
您可以在下方注释代码并重新测试。
// hoverClass: "droppable-in",