javascript - Jquery Draggable 占位符拖放

Question

如何让 placeholder 元素 在被拖动时触发事件？我试过让它在拖动开始时可放下，但它仍然没有触发事件。

这是一个例子 fiddle .

HTML-

<div class="draggable">
</div>
<div  class="draggable">
</div>
<div  class="draggable">
</div>
<div  class="draggable">
</div>

CSS-

.draggable{
   width: 50px;
   height: 50px;
   background-color: #000;
   border: 1px solid #fff;
}
.highlight{
    box-shadow: inset 0px 0px 10px 5px #fed700;
}

JQuery-

$(".draggable").draggable({
   helper: "clone",
   revert: "invalid"
}).droppable();

$(".draggable").on("dropover", function() {
   $(this).addClass("highlight");
});
$(".draggable").on("dropout", function (){
   $(this).removeClass("highlight");
});

当拖动到被拖动的元素上时，它不会改变。我确定这是默认功能，但我想显示为红色 X 之类的东西，而不是默认的什么都没有。

提前致谢!

编辑 - 所以我想我让这有点困惑。因此，当您拖动一个元素时，它会在后面留下一个占位符。我只想让占位符在您再次拖动它时触发 dropover 事件。

Answer 1

拖动开始时保存被拖动的元素: http://jsfiddle.net/e70bvst1/10/ 编辑，在这个 fiddle 中它从一开始就是红色的: http://jsfiddle.net/e70bvst1/13/

var currentDraggedElement;
$(".draggable").draggable({
start: function(e){
    currentDraggedElement = e.target;
    $(currentDraggedElement).addClass("red");
},
stop: function(e){
    $(currentDraggedElement).removeClass("red");
},
helper: "clone",
    revert: "invalid"
}).droppable();

$(".draggable").on("dropover", function(e) {
    $(this).addClass("highlight");
});
$(".draggable").on("dropout", function (e){
    $(this).removeClass("highlight");
    currentDraggedElement = null;
});

希望这正是您所需要的。