Как предотвратить сортировку детей от клонирования

Question

У меня есть три сортируемых списка, один серый и два желтых. Я могу перетащить и клонировать дочерние сортируемые лии в нижние желтые списки без проблем.

Проблема заключается в том, что после того, как дочерний клон li из окна с серым списком помещается в желтые списки, вы больше не можете перетаскивать/перемещать их в пределах содержащего желтый список или в соседний желтый список. Они просто клонируются непрерывно, когда вы пытаетесь перетащить их в другое место.

Я хотел бы перетаскивать и клонировать сортировки из серого списка в желтые поля и иметь клонированные дочерние li, чтобы они могли перетаскивать и перемещаться в желтых списках без клонирования.

Как я могу предотвратить клонирование ребенка li. Любая помощь приветствуется. Благодарю.

http://jsfiddle.net/equiroga/96hJj/

$(function() { 
    $(".sortable").sortable(
    { 
     helper  : "clone", 
     connectWith : ".sortable", 

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

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

Answer 1

Вы можете задать определенное поведение для первого списка и другое для других, другие не могут взаимодействовать с первым с помощью селектора coonectWith с :not селектора.

Код:

$(function() { 
    $("#sortable1").sortable({ 
     helper: "clone", 
     connectWith: ".sortable", 

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

    $(".sortable").sortable({connectWith: ".sortable:not('#sortable1')"}); 
}); 

Демо: http://jsfiddle.net/IrvinDominin/923VG/