jQuery - 防止可拖动元素在拖动后返回到可排序列表

Question

jQuery中有两个连接的可排序元素。他们被称为sortable1和sortable2。当你从sortable2中取出一个元素时，你把它放到sortable1中。用户不应该能够在拖动开始之后将元素移回到sortable2（克隆正在填充空白区域）。因此，一旦拖动开始，它如何避免重新进入sortable2，同时仍然存在sortable1的全部功能？

感谢您提前提供任何帮助！

下面是脚本：

<script> 
$(function() { 
    $("#sortable1").sortable({ 
     connectWith: ".connectedSortable"      
    }).disableSelection(); 
      $('.ui-state-highlight').click(function(){ 
        if ($(this).parent().attr("id")!="sortable2") { 
        $(this).remove(); 
        } 
      }); 
      $("#sortable2").sortable({ 
     connectWith: ".connectedSortable", 
        helper: function(e,li) { 
            copyHelper=li.clone(true,true).insertAfter(li); 
            return li.clone(true,true); 
           } 
    }).disableSelection(); 
});  
</script> 

这里是HTML的名单背后的片段：

<div id="symbolbay"> 
    <p>Drop symbols here</p> 
    <ul id="sortable1" class="connectedSortable"></ul> 
</div> 
<ul id="sortable2" class="connectedSortable"> 
    <li class="ui-state-highlight">Click me to delete only me</li> 
    <li class="ui-state-highlight">Click me to delete only me</li> 
...There are a whole bunch more, finally ending in... 
</ul> 

Answer 1

的connectWith放慢参数是记录在这里的单向关系： http://api.jqueryui.com/sortable/#option-connectWith

所以只需指定＃sortable2与＃sortable1连接，但将＃sortable1中的参数留空即可。

喜欢的东西：

$(function() { 
    $("#sortable2").sortable({ 
     connectWith: "#sortable1" 
    }) 
    $("#sortable1").sortable({ 
    }) 
}); 

http://jsfiddle.net/69vPK/2/