jquery - 不正确的工作 HTML5 可排序列表、ajax 帖子和禁用项目

Question

我正在为 jQuery、HTML5 Sortable http://farhadi.ir/projects/html5sortable/使用一个简洁的排序插件，并且想禁用一些项目。

我添加class="disabled"到<li>-tag并添加items: ':not(.disabled)'到javasript，但它不起作用......

顺便说一句，如果$('.sortable').sortable().bind()从 javasript 中删除函数，那么一切正常......

有谁知道我做错了什么？

<ul id="disabled" class="sortable">
    <li data-id="1" class="disabled">One</li>
    <li data-id="2">Two</li>
    <li data-id="3">Three</li>
    <li data-id="4" class="disabled">Four</li>
    <li data-id="5">Five</li>
</ul>

<script>
$(function() {
    $('.sortable').sortable().bind('sortupdate', function() {
    var dataIDList = $('.sortable li').map(function(){  return $(this).data("id"); }).get().join(",");
    $.ajax({ type: "POST",  url: "post.php?dataIDList="+dataIDList });
    }); 

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

Answer 1

克里斯蒂娜，试着像这样修改你的代码：

$(function() {
    $('.sortable').sortable({
        items: ':not(.disabled)'
    }).bind('sortupdate', function() {
    var dataIDList = $('.sortable li').map(function(){  return $(this).data("id"); }).get().join(",");
    $.ajax({ type: "POST",  url: "post.php?dataIDList="+dataIDList });
    });
});

Answer 2

原因是您在开始时调用 sortable：

$('.sortable').sortable().bind('sortupdate...

您需要将其更改为：

$('.sortable').bind('sortupdate...