我使用的是jquery ui可拖放的。
看这个fiddle
当我将容器4拖动到可拖放div(.Container)时,hoverClass将作为例外工作-如果是拖放区域,则背景将为蓝色。
但是,当我拖动容器3(容器4在里面)时,hoverClass不起作用-背景总是红色的,但是如果我在红色区域中放置,则接受放置。
###编辑:###
**这在Chrome中有效!Firefox和IE不工作!**
编辑2:
当尝试先拖动内部容器(不带拖放)时会出现此问题。之后,hover类不适用
那么,当我使用拖放进行拖动时,我必须如何激活hoverClass?
提前谢谢!
Html格式:
<div class=drag>
<div>Container-1</div>
<div class=container>
<div class=drag>
<div>Container-2</div>
<div class=container>
<div class=drag>
<div>Container-3</div>
<div class=container>
<div class=drag>
<div>Container-4</div>
<div class=container></div>
</div>
</div>
</div>
</div>
</div>
</div>
Css:
.drag {
padding:10px;
border:1px solid black;
background-color:white;
}
.container {
margin-left:30px;
padding:20px;
background-color:red
}
.drag + .drag{
margin-top:10px
}
.drop-area{
background-color:blue;
}
Javascript代码:
$(".drag").draggable({
appendTo: "body",
revert: true,
opacity:0.9,
start: function(){
$(this).attr("oldZIndex",$(this).css("z-index"));
$(this).css("z-index", 3000);
},
stop:function(){
$(this).css("z-index", $(this).attr('oldZIndex'));
}
/*helper: "clone"*/
});
$(".container").droppable({
drop: function(event, ui) {
console.log($(this), ui.draggable);
$(this).append(ui.draggable);
},
hoverClass: 'drop-area',
greedy: true,
tolerance: "pointer"
})
最佳答案
我还在调查这个。但中间的解决方案是下面的代码。我已将活动类设置添加到可拖放事件。
$(".drag").draggable({
appendTo: "body",
revert: true,
opacity:0.9,
start: function(){
$(this).attr("oldZIndex",$(this).css("z-index"));
$(this).css("z-index", 3000);
},
stop:function(){
$(this).css("z-index", $(this).attr('oldZIndex'));
}
/* helper: "clone"*/
});
$(".container").droppable({
drop: function(event, ui) {
console.log($(this), ui.draggable);
$(this).append(ui.draggable);
},
hoverClass: 'drop-area',
activeClass: 'drop-area',
greedy: true,
tolerance: "pointer"
})
但问题仍然是,当外部div被拖动时,贪婪设置对于第三个容器不起作用。一旦我能解决贪婪的问题,我也会更新同样的内容。