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/