jQuery嵌套可排序列表

Question

i have this code

$(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 : '.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");
        }
    });
});

对于这种类型的无序列表

<ul id="test-list">
  <li></li>
  <li>
    <ul id="test-sub">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
   </ul>
  </li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

但是它可以动态地改变... 当我拖放主要的li时，它能够工作 当我用子元素这样做时，它会拖动主要的那一个

出了什么问题？

- Y.G.J

---

当我使用items:"li"时，我可以从父元素拖放到子元素，但不能反向操作。不确定这个"items"选项是如何工作的。 - Luke

以下是关于如何使用jquery-ui制作可排序的N级嵌套列表（可配置）的我的fiddle链接：https://jsfiddle.net/nickleus/j7bm8jrq/15/ - Nick Humphrey

@NickHumphrey，你创建的这个代码片段几乎完美地符合我所需的功能。唯一需要帮助的更改是限制移动范围。我在这里fork了你的代码片段：https://jsfiddle.net/SavageCatHV/u0hr6mLa/ 我想要实现的更改是：可以移动一周，但必须保持为一周或其当前缩进。同样，一天可以移动到任何一周，但也必须保持其当前缩进。我在stackoverflow上有一个问题：https://stackoverflow.com/questions/54016071/jquery-ui-sorting-some-elements-of-nested-list。我希望你能够查看并回答它。希望不会比我想象中的更难。 - HPWD

Answer 1

我在博客上写过这个。虽然有点复杂和令人困惑，但其实很简单。

http://a.shinynew.me/post/4641524290/jquery-ui-nested-sortables

- Burke Holland

---

“no working that good” 是什么意思？你能详细解释一下哪里出了问题吗？ - Burke Holland

当您拖动具有其下的li的ul时，它们都变得杂乱无章。 - Y.G.J

是的，这确实会变得忙碌。停止“闪烁”的最好方法是增加嵌套ul的高度。 - Burke Holland

@BurkeHolland 如果您在此处添加了代码片段，那将是很好的。您提供的链接已经失效了。 - Kiran Shahi

Answer 2

我写了一个专门针对嵌套结构的拖放脚本 快来看看... https://supraniti.github.io/Lean-Mean-Drag-and-Drop/

- Yair Levy