Question

如何在拖动时让占位符元素触发事件？我已经尝试在拖动开始时使其可以放置，但它仍然不会触发事件。

以下是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/ 编辑，从这个小提琴开始它是红色的： 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;
});

希望这真的是你需要的。

Jquery Draggable占位符下降

1 个答案: