javascript Jquery Sortable，通过拖出删除当前项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3377161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Sortable, delete current Item by drag out
提问by Peter
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.
我的问题： sortable 事件：当我在列表中拖动某些内容或对列表进行排序时触发。但是我只想在拖出项目时启动该功能。
My code
我的代码
$(document).ready(function ust()
{
$('#div1').sortable({
out: function(event, ui) { $('#nfo').append('OUT<br />'); }
});
});
Working example http://jsfiddle.net/FrbW8/22/
采纳答案by redsquare
This is the default behaviour of the out callback. See this jquery ui trac ticket
这是 out 回调的默认行为。看到这个 jquery ui跟踪票
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”回调仍将被触发。这是合乎逻辑的行为，也适用于正常的排序。 ”
回答by Michael Finger
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.)
（我最初在 Google 上找到了这个，但再也找不到链接了。所以，我很抱歉没有引用来源。）
回答by guilleva
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/
这是这种方法的 jsfiddle：http: //jsfiddle.net/n3pjL/
回答by Newman
I use this.element.find('.ui-sortable-helper').lengthto 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过去常常区分“整理事件”和“退出事件”。排序时，已排序的项目具有 ui-sortable-helper 类。删除之后，在您再次开始排序之前（至少在我的脚本中），没有其他 ui-sortable-class 。希望对某人有所帮助。
