Question

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

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

问题是，虽然我的垃圾桶是一个接受'*'的dropable，但我的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事件，你可以正确处理删除。

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

如果这不符合您的要求，您是否可以抛出一个演示somewhere，因此我们知道我们究竟需要解决什么才能保持您的结构完好无损，同时还要添加您需要的功能？

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

2 个答案: