jquery嵌套可排序列表

时间:2010-03-21 12:19:22

标签: jquery jquery-ui-sortable nested-lists

我有这个代码

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

<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它正在工作 当我对孩子们这样做时,它会拖动主要的

出了什么问题?

2 个答案:

答案 0 :(得分:2)

我在博客上发表了这篇文章。这不是那么直截了当,有点令人困惑,但真的很简单。

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

答案 1 :(得分:1)

我写了一个专为嵌套结构设计的拖放脚本 看看这个... https://supraniti.github.io/Lean-Mean-Drag-and-Drop/