JQuery UI可排序 - ConnectWith - 禁用一列

Question

我有2個UL列表，如下所示。我希望能夠從＃sortable1克隆到＃sortable2，現在可以工作，但問題是＃sortable1可以拖放到自己，我不想要。

＃sortable1應該是一個靜態列表，只允許項目被拖入＃sortable2並作爲結果進行克隆。

由於提前，

<ul id="sortable1"> 
    <li class="ui-state-default">Item 1</li> 
    <li class="ui-state-default">Item 2</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
</ul> 

<ul id="sortable2"> 
    <li class="ui-state-highlight">Item A</li> 
    <li class="ui-state-highlight">Item B</li> 
    <li class="ui-state-highlight">Item C</li> 
    <li class="ui-state-highlight">Item D</li> 
    <li class="ui-state-highlight">Item E</li> 
</ul> 

    $(function() 
    { 
     $("#sortable1").sortable(
     { 
      helper  : "clone", 
      connectWith : "#sortable2", 
      start  : function(event,ui) 
      { 
      $(ui.item).show(); 
      clone = $(ui.item).clone(); 
      before = $(ui.item).prev(); 
      position = $(ui.item).index(); 
      }, 
      stop  : function(event, ui) 
      { 
      if (position == 0) $("#sortable1").prepend(clone); 
      else before.after(clone); 
      } 
     }); 

     $("#sortable2").sortable(); 
}); 

Answer 1

可以使用beforeStop事件取消落下如果＃sortable1

$(function() 
{ 
    $("#sortable1").sortable(
    { 
     helper  : "clone", 
     connectWith : "#sortable2", 
     start  : function(event,ui) 
     { 
     $(ui.item).show(); 
     clone = $(ui.item).clone(); 
     before = $(ui.item).prev(); 
     position = $(ui.item).index(); 
     }, 
     beforeStop : function(event, ui) 
     { 
      if($(ui.item).closest('ul#sortable1').length>0) 
      $(this).sortable('cancel');         
     }, 
     stop  : function(event, ui) 
     { 
     if (position == 0) $("#sortable1").prepend(clone); 
     else before.after(clone); 
     } 
    }); 

    $("#sortable2").sortable(); 
}); 

Answer 2

您可以設置「遏制」選項只包括sortable2列表，像這樣。

$("#sortable1").sortable( 
    { 
     helper  : "clone", 
     connectWith : "#sortable2", 
     containment: "#sortable2", 
     ..... 
    });