Question

我自上周五以来一直在寻找这个，无法找到任何解决方案。我想过并尝试过几次的一件事是首先构建函数，其中列表中包含该项的所有项目（实际上应该被排除在其他列表之外）可以在该列表中移动，并且之后构建另一个函数，其中所有项目都准备好也被移动到其他列表中，但是某个项目被排除在外。

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

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

问候，Maschek

修改

以下是一些代码：

 $("#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项都可以移动到＃tx-sortable3列表和＃tx-sortable2列表中，这就是connectWith的含义。再一次，我的问题是，我如何在自己的列表（这里是＃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”，这样就无法水平移动它们。然后你会有一个列表，您可以在其中对该列表中的项目进行排序，但您无法将其与其他列表连接。

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

2 个答案: