jquery - 当我将排序对象拖到容器外时，如何使排序对象消失？

Question

我想让 jquery UI 元素在拖到容器外时消失。

例如，假设我有一个列表

<div class="myfavoritecontainer">
   <ul class="sortable">
   <li>item1</li>
   <li>item2</li
  </ul> 
</div>

并且可排序变成了 jquery ui 可排序...现在，当我将这些项目拖出排序列表时，我想让它们消失...完成的最佳方法是什么？

对我正在尝试做的事情进行一些澄清:引用这个jsfiddle:http://jsfiddle.net/nveid/kQmWt/4/

基本上，我将右侧列表中的项目添加到左侧列表中(该部分已完成!)，其次，当我将列表左侧的项目拖动到左侧列表之外时，我想让它们消失。如果您在拖动左侧内容时查看 js 控制台，您将仔细看到我正在尝试完成的任务。但我只是没有完成它，因为在触发鼠标左键后立即触发 mouseenter 。我不知道事件触发发生的确切原因，但 fiddle 应该给出一些说明。

最好我可以做到这一点，以便当您将鼠标从其 div 容器外部拖动左侧的项目时，它们就会消失，但我会设置为在它们恢复到原始位置后 li 项目将消失消失，但 mouseenter/mouseleave 事件不适合我。

Answer 1

我看起来您需要使用 beforeStop 来删除项目并根据 over 和 out 维护一个哨兵来确定您是否已移出容器的边界。我的基础是这里的上一篇文章:Jquery Sortable, delete current Item by drag out

jsFiddle 编辑在可排序定义中将如下所示:

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