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

Question

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

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

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

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

我已经尝试包装一个 mouseup 处理程序inside of a sortout，我最终让它工作，但是你不能对列表中的项目进行排序。

关于我应该把它带到哪里的任何想法？

Answer 1

你需要绑定到目标列表（ID“droplist”）上的drop事件，像这样：

$("#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
})

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

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

代码 sn-p 会很方便地提供进一步帮助。

Answer 2

使用不同的方法，这似乎比我想象的要混乱。我还没有在 IE 中测试，这可能会打开一个新的蠕虫罐，所以我会让拖动只是排序并添加一个删除按钮。干杯，

没有