Question

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

例如，假设我有一个

列表

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

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

对我正在尝试做的事情进行一点澄清：参考这个jsfiddle：http://jsfiddle.net/nveid/kQmWt/4/

基本上来自右侧列表的项目我将添加到左侧的列表中（已完成的部分！），其次是当我拖动到左侧列表之外时列表左侧的项目我想让它们消失。如果你在拖动左侧内容的同时查看你的js控制台，你会仔细看到我想要完成的事情。但是我只是没有完成它，因为鼠标左键被触发后正在触发鼠标中心。事件触发的确切原因正在发生我不知道，但小提琴应该给出一些澄清。

我最好能做到这一点，只要你拖动它的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(); 
           }
        },

如何将我的sortables拖到容器外面时消失？

1 个答案: