0
    $(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 进行排序是有效的,但不是一直都在工作 - 我会尝试自己解决这个问题,但如果这里的代码有问题,而不是 proccess-sortable 中的代码有问题 - 告诉我。
  2. 在主 ul 中移动 li 是可以的,但是 sub 或 sub 的 sub 有问题 - 我可以将一些东西从一个 sub 拖到它的 sub 或其他方式 - 我不希望这种情况发生。
  3. 我希望能够拖动 li 并选择只有这个 ul 组将发送到 proccess-sortable 以进行更新的那个 - 我怎样才能捕捉到我正在拖动的 li 的特定 ul?
4

1 回答 1

0

我看到的第一件事是您为多个 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 的验证器

于 2010-03-25T20:33:50.337 回答