1

这是我当前的代码。这些代码对父项和子项进行排序，但仅显示排序后子项的新顺序。

模板

<div id="tree">
    <ul id="envelopes" class="dropcat cat-data">
        <li id="1">
            <span class="cat-title">Utilities</span>
            <ul class="dropenv mt">
                <li class="innerList">Electricity</li>
                <li class="innerList">Water</li>
                <li class="innerList">Trash</li>
                <li class="innerList">Television</li>
            </ul>
        </li>

        <li id="2">
            <span class="cat-title">Sample</span>
            <ul class="dropenv mt">
                <li class="innerList">Test</li>
            </ul>
        </li>

        <li id="3">
            <span class="cat-title">Saving</span>
            <ul class="dropenv mt">
                <li class="innerList">College Fund</li>
                <li class="innerList">Retirement Fund</li>
                <li class="innerList">Emergency Fund</li>
            </ul>
        </li>
    </ul>
</div>
<p id="cl"></p>

js

<script>
    var addPositions = function() {
        $('.dropenv, .dropcat').each(function() {
            var position = 0;
            $(this).children().each(function() {
                $(this).data('position', position);
                position++;
            });
        });
    };

    $(document).ready(function() {
        addPositions();
        var origTitle;
        var origColor;
        $(".dropenv").sortable({
            connectWith: "ul.mt",
            dropOnEmpty: true,
            start: function(event, ui) {
                origColor = ui.item.text();
                origTitle = ui.item.parent().siblings('.cat-title').text();
            },
            stop: function(event, ui) {
                var order = [];

                ui.item.closest('ul').children('li').each(function() {
                    order.push($(this).data('position'));
                    var c = $(this).text();
                    if (c === origColor) {
                        var z = origTitle;
                    } else {
                        var z = $(this).parent().siblings('.cat-title').text();
                    }
                    $("#cl").append(z + "_" + c + "<br /\>");
                });
            }
        });

        $( "ul.dropcat").sortable({
            connectWith: "ul.cat-data",
            dropOnEmpty: true,
        });
    });
</script>

如何获取父级的新订单？

例如：

   Before:
      - Utilities
      - Sample
      - Saving

  //If I'm going to swap Saving to Utilities, it must be display the new order like this

   New Order:
      - Saving
      - Sample
      - Utilities

来自@Jack Shedd 的更新

我复制stop并得到以下输出：

_ Utilities Electricity Water Natural Gas Home Phone Cell Phones Trash Television Internet
_ Charity/Giving Charitable Gifts Fast Offerings
_ Sample test
_ Recreation Entertainment Vacation
_ Saving College Fund Emergency Fund Retirement Fund

如何让只有父母，没有孩子？

4

1 回答 1

1

基于代码和问题：

  1. 您的对象上有一个自定义stop事件处理程序sortable，在用户停止拖动后，它会将子项的新位置附加到 #cl 段落标记的 innerHTML 中。
  2. 您想知道为什么这对孩子有效，但对父母无效。

如果你查看你的 jQuery，你会看到这一行：

$(".dropenv").sortable({

这是将sortable行为应用于任何具有.dropenv. 在这里，您正在初始化stop更新#cl 标记的自定义事件处理程序。

但是，您仅将此行为应用于具有类的元素.dropenv，其中，查看父级的 html：

<ul id="envelopes" class="dropcat cat-data">

父 UL 不匹配。

相反，您正在对父级应用全新的sortable行为：

    $( "ul.dropcat").sortable({
        connectWith: "ul.cat-data",
        dropOnEmpty: true,
    });

其中没有包含任何自定义stop处理程序代码。

因此，要么将可排序选项中的stop处理程序代码复制到上述选项中，要么使可排序选项也适用于您的UL。.dropenv.dropenv.dropcat

于 2013-03-15T06:32:27.793 回答