如何在排序后显示父级的新顺序？

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

模板

 
 
 Utilities 
 
Electricity
 
Water
 
Trash
 
Television
 
 
 
 Sample 
 
Test
 
 
 
 Saving 
 
College Fund
 
Retirement Fund
 
Emergency Fund
 
 
 
 
 
 

JS

  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 + "
"); }); } }); $( "ul.dropcat").sortable({ connectWith: "ul.cat-data", dropOnEmpty: true, }); });  

如何获得父母的新订单？

例如：

  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 

如何只获得父母，没有孩子？

Answer 1

基于代码和问题：

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

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

 $(".dropenv").sortable({ 

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

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

父母UL不匹配。

相反，您将一个全新的sortable行为应用于父级：

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

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

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