How to display the new order of the parent after sorting?
<p>Here are my current codes. These codes sort both parent and child but it display only the new order of the child after sorting.</p>

<p><strong>template</strong></p>

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

        &lt;li id="2"&gt;
            &lt;span class="cat-title"&gt;Sample&lt;/span&gt;
            &lt;ul class="dropenv mt"&gt;
                &lt;li class="innerList"&gt;Test&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;

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

<p><strong>js</strong></p>

<pre><code>&lt;script&gt;
    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 + "&lt;br /\&gt;");
                });
            }
        });

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

<p><strong>How to get the new order of the parent?</strong></p>

<p>For example:</p>

<pre><code>   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
</code></pre>

<p><strong>Update from @Jack Shedd</strong></p>

<p>I copy the <code>stop</code> and I get this output:</p>

<pre><code>_ 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 
</code></pre>

<p>How to get parent only, no child?</p>
