11

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

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

问题是，虽然我的垃圾桶是一个接受“*”的可丢弃物，但我的可排序仅被告知connectWith其他“.dropZone”项目，这意味着我无法让任何可排序元素导致垃圾元素上的悬停状态.

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

4

2 回答 2

18

由于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/

于 2010-10-30T13:09:33.937 回答
1

How about making the trash can a .dropZone as well? Then you would get a proper drop event, and you could handle the deleting properly.

There may be side effects of making the trash can a sortable, but I figure they should be easy to work around.

If this doesn't meet your requirements, could you throw up a demo somewhere, so we know what exactly we'd have to work around to keep your structure intact, while still adding the functionality you need?

于 2010-10-28T10:40:21.400 回答