jquery ui sortable：连接和不连接？答案

【问题标题】：jquery ui sortable: connected with and not connected with?jquery ui sortable：连接和不连接？
【发布时间】：2012-12-16 03:48:04
【问题描述】：

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

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

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

这里是jsfiddle。

jquery，

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

                   // php updates  

                }
  });

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable jquery-ui-draggable

【解决方案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。我希望这会有所帮助。

【讨论】：