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

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,通过拖出删除当前项目

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(); 
           }
        },