制作一个jQuery droppable接受来自使用connectWith的sortable的项目

Question

我有一个可排序的列表,connectWith用于确保它只能在自己的列表类型中排序.

现在,我正在尝试在对项目进行排序时,在视口底部显示可放置的垃圾桶元素.此元素位于列表的上下文之外,只删除放在其上的任何元素.如果您熟悉,则所需功能与从Android手机桌面删除快捷方式相同.

问题是,虽然我的垃圾桶是一个接受'*' connectWith的dropable ,但我的sortable仅被告知其他'.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事件，并且你可以正确地处理删除。

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

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