如何在排序後顯示家長的新訂單？

Question

這是我現在的代碼。這些代碼對父代和子代都進行排序，但僅在排序後顯示子代的新順序。

模板

<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更新謝德

我複製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事件，其時，用戶停止拖動後，將孩子的新位置追加到的的innerHTML #cl段落標記。
2. 你想知道爲什麼這適用於孩子，但不是父母。

如果你看看你的jQuery，你會看到這樣一行：

$(".dropenv").sortable({ 

這是一類的.dropenv應用sortable行爲的任何元素。在這裏，您正在啓動更新#cl標記的自定義stop事件處理程序。

但是，你只是將這種行爲與元素類的.dropenv，其中，審查你的父HTML：

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

父UL不匹配。

相反，你申請了一個全新的sortable行爲父：

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

其中有沒有包含在其內的自定義stop處理程序代碼。

所以，無論是從.dropenv排序選項stop處理程序代碼複製到一個以上，或使.dropenv排序適用於您的.dropcat UL爲好。