jQuery Droppable，获取被拖动的元素

Question

希望能得到简单回答的一个小问题，我正在使用jQuery可拖拽和可放置功能将项目放入码头。以下是拖放的代码：

$("#dock").droppable({
            drop: function(event, ui) {
                //Do something to the element dropped?!?
            }
        });

然而，我找不到一种方法来获取实际被拖放的元素，以便我可以对其进行操作。这是否可能？

- Pez Cuckow

Answer 1

从drop事件文档中得知:

当一个被接受的可拖拽对象被'放置'（在容忍范围内）到这个可投放区域时，会触发此事件。在回调函数中，$(this)代表被放置的可投放区域，而ui.draggable则表示可拖拽对象。

因此：

$("#dock").droppable({
     drop: function(event, ui) {
               // do something with the dock
               $(this).doSomething();

               // do something with the draggable item
               $(ui.draggable).doSomething();
           }
});

- karim79

---

需要移除活动的CSS类吗？ - aroos

对我来说，这意味着该元素处于拖动状态，位置为相对定位，并具有左/右坐标。 - Tom B

你在 doSomething() 函数中如何准确选择可拖动的元素？ - user5176037

这段代码可以正常工作。$("#drag").draggable(); $("#drop").droppable({ drop: function (event, ui) { $(this).css("background-color","red"); }, out: function( event, ui ) { $(this).css("background-color","yellow"); } });为什么这段代码不能正常工作？$("#drag").draggable(); $("#drop").droppable({ drop: function (event, ui) { $(this).css("background-color","red"); }, out: function( event, ui ) { $(this).css("background-color","yellow"); } });codepen - MaxySpark

我不得不使用ui.draggable[0]。ui.draggable是一个数组。 - Ryan Leach