jquery sortable - 排除列表中的单个项目与其他列表连接，同时在其自己的列表中排序

Question

我从上周五开始就在寻找这个，找不到任何解决方案。我考虑并尝试了几次的一件事是首先构建函数，其中列表中的所有项目，包含该项目，实际上应该被排除在其他列表中之外的项目有权在该列表中移动，并且稍后构建另一个函数，其中所有项目都准备好也被移动到其他列表中，但某个项目被排除在外。

但似乎你不能用 jquery 为一个列表编写两个函数，或者这可能吗？

无论如何，我的请求实际上在标题中得到了最好的描述，而我直到现在才得到任何解决方案。有人知道如何解决这个问题吗？

问候，马斯切克

编辑：

这里有一些代码：

 $("#tx-sortable2").sortable({    
                               items: \'li:not(.tx-header)\',
                                connectWith: \'#tx-sortable2,#tx-sortable3\',            
                                helper: \'clone\',
                                 opacity: 0.6,

                                 forceHelperSize: true,
                                placeholder: \'tx-highlight\',
                                revert: \'invalid\',
                                update: function() {
                                    var order = $(this).sortable("serialize") + \'&action=bla=blubb\';                                    
                                    $.ajax({
                                         url: \'index.php?bla=blubb\',
                                         type: \'POST\',
                                         data: order,
                                         timeout: 50000,
                                         beforeSend: function() {
                                         $("#tx-response").show();
                                         $("#tx-response").fadeOut(2000);
                                    }
                               });                    
                          }             

在此示例中，#tx-sortable2 中的所有 li-items 都可以移动到列表 #tx-sortable3 和列表 #tx-sortable2 本身中，这就是 connectWith 的含义。再次，我的问题是，我如何使单个 li-item 在其自己的列表中可排序（此处为#tx-sortable2），但防止它被拖到另一个列表中？

Answer 1

当排除的项目被移动到连接列表时，您可以触发取消事件。 只需给被排除的项目一些特殊的属性（类）。

有点意思。

html

<ul id="tx-sortable2">
    <li>Element2_1</li>
    <li class="excluded">Element2_2</li>
    <li>Element2_3</li>
    <li>Element2_4</li>
</ul>

<ul id="tx-sortable3">
    <li>Element3_1</li>
    <li>Element3_2</li>
    <li>Element3_3</li>
    <li>Element3_4</li>
</ul>

js

$("#tx-sortable2").sortable({
    connectWith: '#tx-sortable3', 
    over: function(){
        if($(ui.item.hasClass('excluded')){
           $(ui.sender).sortable('cancel');
        }
});

Answer 2

我认为您可以使用 jQuery UI 自己的选项 Axis。它指定项目可以移动的方向。因此，如果您的其他列表在右侧或左侧，您可以将轴选项设置为“y”，因此您无法水平移动它们。然后您将有一个列表，您可以在其中对列表中的项目进行排序，但您无法将其与其他列表连接。