jquery - 如何检查可拖动项目悬停在哪个元素上？ (JQuery)

Question

我有两个列表。第一个由可拖动的项目组成(例如 this )。它连接到第二个，这是一个可排序列表(如 this )。

可以通过将第一个列表中的项目拖动到第二个列表来将其添加到第二个列表中。然后它们被克隆并呈绿色，以便用户可以看到它们是未保存的添加内容。

我想要发生的是，当您将一个项目拖出第二个列表时，它将被标记为删除，或发送回第一个列表(如果它是未保存的添加项)。不过，我也希望人们能够对第二个列表进行排序。

因此，如果他们将某个项目拖出并释放鼠标，则该项目应该被删除。如果他们将某个项目拖出并再次拖入，则不应将其删除。

我尝试包装 mouseup 处理程序 inside of a sortout ，这样我最终就可以工作了，但是你无法对列表中的项目进行排序。

我应该把它带到哪里有什么想法吗？

Answer 1

您需要绑定(bind)到目标列表(ID“droplist”)上的放置事件，如下所示:

$("#droplist").bind( "drop", function(event){
    $(this).append( event.dragTarget ); // or use prepend to put it at the top
    console.log("Dropped " + event.dragTarget.title);
    // trigger another event to do the work around checking if it is an unsaved addition
})

要在拖出时删除项目，您可以尝试绑定(bind)到列表周围的容器元素。

$("#background").bind( "drop", function(event){
    event.dragTarget.remove(); // guessing here
})

代码片段可以方便地提供进一步的帮助。