連接的具有可禁用項目的可排序列表

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

正如我在上面的評論中提到的，我相信您只需要一個sortable函數。 因此它可能應該這樣工作：

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

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

如果要使用兩個功能，則可以如下定義它們

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

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