如何防止子分类克隆

Question

我有三个可排序的列表框，一个灰色，两个黄色。我可以将子可排序的 li 拖放到底部的黄色列表中，这没问题。

问题是，一旦将灰色列表框中的子克隆 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/