使 jQuery droppable 接受来自使用 connectWith 的可排序项的项目

Question

我有一个可排序列表，它使用 connectWith 确保它只能在其自己的列表类型中排序。

现在，我正在尝试制作一个可放置的垃圾桶元素，当对项目进行排序时，该元素会出现在视口底部。该元素位于列表的上下文之外，并且仅删除放置在其上的任何元素。如果您熟悉的话，所需的功能与从 Android 手机桌面删除快捷方式相同。

问题是，虽然我的垃圾桶是一个接受 '*' 的 droppable，但我的 sortable 只被告知 connectWith 其他 '.dropZone' 项目，这意味着我无法将任何可排序元素导致垃圾元素上出现悬停状态。

我尝试过在 start 事件上将每个可排序项变成可拖动项，但当然我没有在确切的时刻拖动该可拖动项，因此它没有被激活。是否可以同时满足这两个要求，还是我必须手动检测垃圾桶悬停？

Answer 1

由于 connectWith 接受选择器，因此您可以为其提供一个选择器，以选择其他连接的列表和垃圾箱。

$("#sortable1, #sortable2").sortable({
    connectWith: '.connectedSortable, #trash'
}).disableSelection();

$("#trash").droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function(ev, ui) {
        ui.draggable.remove();
    }
});

示例： http://jsfiddle.net/petersendidit/YDZJs/1/

Answer 2

将垃圾桶也设为 .dropZone 怎么样？然后你会得到一个正确的 drop 事件，并且你可以正确处理删除。

让垃圾桶可分类可能会产生副作用，但我认为它们应该很容易解决。

如果这不能满足您的要求，您可以在某处上提供一个演示，以便我们知道我们到底需要做什么设法保持结构完整，同时仍然添加所需的功能？