Question

我有三个可排序的列表框，一个灰色和两个黄色。我可以拖动并克隆儿童可排序的李氏到底部黄色列表没有问题。

问题是，一旦从灰色列表框中将子克隆li放入黄色列表框，您就不能再在包含的黄色列表框或相邻的黄色列表框中拖动/移动它们。当你试图将它们拖到别处时，它们只是连续克隆。

我想将灰色列表框中的可排序列表拖放到黄色框中，让克隆的子列表能够在黄色列表框中拖动和移动而不进行克隆。

如何防止儿童克隆。任何帮助将非常感激。感谢。

$(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

您可以为第一个列表设置特定的行为，为其他列表设置不同的行为，其他人则无法使用带有:not选择器的coonectWith选择器与第一个列表进行互动。

代码：

$(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/

如何防止儿童排序克隆

1 个答案: