对嵌套列表进行排序，同一 ul 中只允许对 li 进行排序

Question

    $(document).ready(function() {

   $("#test-list").sortable({ 
        items: "> li", 
        handle : '.handle', 
        axis: 'y', 
        opacity: 0.6, 
        update : function () { 
            var order = $('#test-list').sortable('serialize'); 
            $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats"); 
        } 
    }); 
    $("#test-sub").sortable({ 
        containment: "ul", 
        items: "li", 
        handle : '.handle2', 
        axis: 'y', 
        opacity: 0.6, 
        update : function () { 
            var order = $('ul').sortable('serialize'); 
            $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats"); 
        } 
    }); 

});

<ul id="test-list">
  <li id="listItem_10">first<img align="middle" src="Themes/arrow.png" class="handle" /></li>
  <li id="listItem_8">second<img align="middle" src="Themes/arrow.png" class="handle" />
    <ul id="test-sub">
      <li id="listItem_4"><img align="middle" src="Themes/arrow.png" class="handle2" /></li>
      <li id="listItem_3"><img align="middle" src="Themes/arrow.png" class="handle2" /></li>
        <ul id="test-sub">
          <li id="listItem_9"><img align="middle" src="Themes/arrow.png" class="handle2" /></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

我遇到的问题：

1. 对主 ul 进行排序是有效的，但并非一直有效 - 我会尝试自己修复该问题，但如果此处的代码有问题，而不是 process-sortable 中的问题 - 告诉我。
2. 在主 ul 中移动 li 是可以的，但子或子的子有问题 - 我可以将某些东西从一个子拖到它的子或其他方式 - 我不希望发生这种情况。
3. 我希望能够拖动 li 并通过选择只有此 ul 组将发送到 process-sortable 进行更新的那个 - 我如何捕获我正在拖动的 li 的特定 ul？

Answer 1

我看到的第一件事是，您为多个 UL 提供相同的 id，并且您实际上只需要将可排序设置为母 ul，您可以使用 可排序事件，例如更改以获取您移动以处理加载过程的 li 的 ul

编辑： 添加更多信息，

好的，所以我去了回头看看我为嵌套排序做了什么，我所做的被使用了 在嵌套排序后面 它需要 ui.core 但可以做我们想做的事情。然后，我使用 serialize_list 将数据序列化回我的服务器。并不是说它是最好的，但这就是我最终做到的。

再次编辑
这是我在你的代码中发现的内容，我没有更改任何内容，只是对其进行了评论，

  $(document).ready(function() {
    $("#test-list").sortable({
      items: "> li", // this is wrong should be "li"
      handle : '.handle',
      axis: 'y',
      opacity: 0.6,
      update : function () {
        var order = $('#test-list').sortable('serialize');
        $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats");
      }
    });


    $("#test-sub").sortable({ // this should be a class so that you can target multiple items
      containment: "ul",
      items: "li",
      handle : '.handle2',
      axis: 'y',
      opacity: 0.6,
      update : function () {
        var order = $('ul').sortable('serialize'); // this say get all ul items it should probably target $(this).closest('ul);
        $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats");
        }
    });
  });

然后你需要检查你的 html，确保你没有重复的 ID，并且你的嵌套已关闭，此外你还缺少 listitem_4 上的引用，

花点时间在发布之前查看您的 html 通常是一个问题，您应该使用 w3 的验证器