Jquery Sortable，通过拖出删除当前项

My Problem: The sortable event out: fires when I drag something in the list or when I sort the list. But I only want to start the function when I drag an item out.

我的问题：可排序的事件：当我在列表中拖动某些内容或对列表进行排序时触发。但我只想在拖出项目时启动该功能。

My code

我的代码

        $(document).ready(function ust()
        {    
            $('#div1').sortable({
                out: function(event, ui) { $('#nfo').append('OUT<br />'); }
            });

        });

Working example http://jsfiddle.net/FrbW8/22/

工作示例http://jsfiddle.net/FrbW8/22/

4 个解决方案

#1

This is the default behaviour of the out callback. See this jquery ui trac ticket

这是out回调的默认行为。看到这个jquery ui trac票

I really do not agree with the 'logical' behaviour notion.

我真的不同意'逻辑'行为的概念。

"However, note that the "out" callback will still be triggered if you drag into a list and then release the mouse (but not if you're not over the list). This is logical behaviour and happens for normal sortables as well."

“但是，请注意，如果您拖入列表然后释放鼠标，仍然会触发”out“回调（但如果您没有在列表上方则不会）。这是逻辑行为，也适用于普通的可排序。 “

#2

Use beforeStop to intercept the item and remove it:

使用beforeStop拦截项目并将其删除：

receive: function(e, ui) { sortableIn = 1; },
over: function(e, ui) { sortableIn = 1; },
out: function(e, ui) { sortableIn = 0; },
beforeStop: function(e, ui) {
   if (sortableIn == 0) { 
      ui.item.remove(); 
   } 
}

(I originally found this in the Google, but can no longer find the link. So, I apologize for not referencing the source.)

（我最初在谷歌找到了这个，但是再也找不到链接了。所以，我为没有引用来源而道歉。）

#3

The other solutions doesn't seems to work with connected sortable lists so I'm posting my own solution that works perfectly for my case. This makes use of the "droppable" plugin capturing the "drop" event when the elements are dropped outside of the sortable lists.

其他解决方案似乎不适用于连接的可排序列表，所以我发布了我自己的解决方案，完全适合我的情况。这使得“droppable”插件在元素被丢弃到可排序列表之外时捕获“drop”事件。

$('#div1').sortable({
    ....
}).droppable({greedy: true})

$('body').droppable({
    drop: function ( event, ui ) {          
        ui.draggable.remove();
    }
});

Here is a jsfiddle of this approach in action: http://jsfiddle.net/n3pjL/

以下是这种方法的实践：http：//jsfiddle.net/n3pjL/

#4

I use this.element.find('.ui-sortable-helper').length to make difference between "sort out event" and "drop out event". When you are sorting, sorted item has class ui-sortable-helper. After drop there is no other ui-sortable-class until you start sorting again (at least in my script). Hope to help someone.

我使用this.element.find（'。ui-sortable-helper'）。length来区分“sort out event”和“drop out event”。在排序时，已排序的项目具有类ui-sortable-helper。在删除之后，没有其他ui-sortable-class，直到你再次开始排序（至少在我的脚本中）。希望能帮助别人。

#1