jquery - jquery ui sortable：连接和不连接？

Question

sortable似乎很connectWith奇怪。例如，我有一个可排序项目列表（橙色），我不希望它们与其他可排序连接列表项目（黄色）连接。

所以我给那些已连接的类添加了一个类名connected-sortable，但那些（橙色）未连接的仍然可以放入已连接列表中。

这是为什么？我该如何解决这个问题 - 橙色项目不应放入黄色项目中。

这是jsfiddle。

jQuery,

 $( ".sortable" ).sortable({
                connectWith: ".connected-sortable",
                cancel: ".not-sortable",
                handle: '.handle',
                update: function(){

                   // php updates  

                }
  });

Answer 1

您可以调用 sortable 两次，其中 .sortable 为黄色， .sortable2 为橙色（不要忘记将 .sortable2 li 添加到您的 css 中）。

$(function() {
        $( ".sortable" ).sortable({
            connectWith: ".connected-sortable",
            cancel: ".not-sortable",
            handle: '.handle',
            update: function(){

                var path = $(this).closest(".parent-sortable").find('input.path-sort-image').val();
                var order = $(this).sortable("serialize");
                //alert(path);
                //alert(order);


            }
        });
$( ".sortable2" ).sortable({             
            cancel: ".not-sortable",
            handle: '.handle',
            update: function(){

                var path = $(this).closest(".parent-sortable").find('input.path-sort-image').val();
                var order = $(this).sortable("serialize");
                //alert(path);
                //alert(order);


            }
        });
    });

我还更新了你的jsfiddle。我希望这有帮助。