jquery - 带有禁用项目的连接可排序列表

Question

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

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

<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>

Answer 1

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

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

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

Answer 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>

Answer 3

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

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