JQuery UI sortierbar - ConnectWith - Eine Spalte deaktivieren

Question

Ich habe 2 UL-Listen wie unten gezeigt. Ich würde gerne in der Lage sein, von # sortable1 in # sortable2 zu klonen, was jetzt funktioniert, das Problem ist jedoch, dass # sortable1 in sich ziehen kann, was ich nicht will.

# sortable1 sollte eine statische Liste sein, die nur Elemente erlaubt, die in # sortable2 gezogen und als Ergebnis geklont werden.

Vielen Dank im Voraus,

<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

können Sie die beforeStop Ereignis verwenden, den Abwurf zu stornieren, wenn auf # 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

Sie können die "Eindämmung" Option nur die sortable2 Liste aufzunehmen, wie so.

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