带有禁用项目的连接可排序列表答案

【问题标题】：Connected sortable lists with disabled items带有禁用项目的连接可排序列表
【发布时间】：2013-01-16 19:32:01
【问题描述】：

我使用this 短列表，并且我想使用两个连接的可排序列表和禁用项目。

不幸的是，它不起作用。谁能帮帮我？

<section>
    <h1>Connected Sortable Lists</h1>
    <ul id="sortable4" class="connected sortable list">
        <li>Item 1
        <li>Item 2

    </ul>
    <ul id="sortable5" class="connected sortable list">
        <li class="disabled">Item 21
        <li class="highlight">Item 22

    </ul>
</section>

<script>
    $(function() {      
        $('#sortable5').sortable({
            items: ':not(.disabled)'
        });

        $('#sortable4, #sortable5').sortable({
            connectWith: '.connected'
        });
    });
</script>

【问题讨论】：

什么不起作用？你想达到什么目的？
您是否尝试将items: ':not(.disabled)' 包含在第二个可排序函数调用中？

标签： jquery html jquery-ui jquery-ui-sortable

【解决方案1】：

正如我在上面的评论中提到的，我相信您只需要一个 sortable 函数。所以它可能应该这样工作：

<script>
    $(function() {      
        $('#sortable4, #sortable5').sortable({
            connectWith: '.connected',
            items: ':not(.disabled)'
        });
    });
</script>

【讨论】：

非常感谢！有用！不幸的是，我还有另一个可排序的功能。可以只做一个吗？

【解决方案2】：

<script>
$('ul.sortable').sortable().bind(
    'sortupdate', function() {                      
        var dataIDList = $('ul.sortable li').map(
            function(){ 
                return $(this).attr("data-id");
            }
        ).get().join(",");

        $.post(
            'sort_save.php',{ idlist: dataIDList }, function(data){
                alert('ok!' + data); 
            }
        );
    }
);      

$(function() {      
    $('#sortable4, #sortable5').sortable({
        connectWith: '.connected',
        items: ':not(.disabled)'
    });
}); </script>

【讨论】：

【解决方案3】：

如果要使用两个函数，可以如下定义

$('#sortable4').sortable({
        connectWith: '#sortable5',
        items: ':not(.disabled)'
    });

$('#sortable5').sortable({
        connectWith: '#sortable4',
        items: ':not(.disabled)'
    });

【讨论】：