排序后如何显示父级的新顺序? [英] How to display the new order of the parent after sorting?

问题描述

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

Here are my current codes. These codes sort both parent and child but it display only the new order of the child after sorting.

模板

<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并得到以下输出:

I copy the stop and I get this output:

_ 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 

如何只生父母，没有孩子?

How to get parent only, no child?

推荐答案

基于代码和问题:

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

1. You have a custom stop event handler on your sortable object which, after the user stops dragging, will append the new position of the child to the innerHTML of the #cl paragraph tag.
2. You're wondering why this works for the children, but not the parent.

如果您查看jQuery，您将看到以下行:

If you look at your jQuery, you'll see this line:

$(".dropenv").sortable({

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

This is applying the sortable behavior to any element with a class of .dropenv. It's here that you're initing the custom stop event handler which updates the #cl tag.

但是，您仅将此行为应用于类为.dropenv的元素，该类将检查html的父元素:

However, you're only applying this behavior to elements with a class of .dropenv, which, reviewing your html for the parent:

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

父UL不匹配.

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

Instead, you're applying an entirely new sortable behavior to the parent:

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

其中没有任何自定义的stop处理程序代码.

Which has none of the custom stop handler code contained within it.

因此，可以将stop处理程序代码从.dropenv可排序选项复制到上面的选项中，或者将.dropenv可排序选项也应用于您的.dropcat UL.

So either copy the stop handler code from the .dropenv sortable options into the one above, or make the .dropenv sortable apply to your .dropcat UL as well.

这篇关于排序后如何显示父级的新顺序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！