4

我想让 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。事件触发发生的确切原因我不知道，但小提琴应该给出一些澄清。

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

4

1 回答 1

9

我看起来您需要使用 beforeStop 删除项目并根据反复来维护哨兵，以确定您是否已移出容器边界。我基于上一篇文章：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(); 
           }
        },
于 2012-08-12T02:07:30.433 回答