可訂購兒童元素排序組

我有一個MySQL表產品和其他表集合。可訂購兒童元素排序組

每個系列都包含一些產品（但是某些產品沒有收集）。

我收集id存儲在產品列，例如：

在管理面板I顯示所有的產品，以這樣的方式

但現在我需要使它可分類並按收藏分組，看起來像這樣：

其實這些產品是可排序的（使用jQuery UI），我將訂單存儲在數據庫中，以便按照該順序顯示產品。

如何將每個集合的所有產品分組並重新排列該組以便產品更改訂單？ https://jsfiddle.net/jimmyadaro/mty2br9n/

來源

2016-11-08 Jimmy Adaro

有人可以提供幫助

重排序實際邏輯的MCVE？ ... –

您需要格式HTML這樣的事情fiddle：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <!-- CSS library --> 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <!-- jQuery library --> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
     $(document).ready(function() { 

      //Look the EXTERNAL RESOURCES (jquery 2.1.0 and jquery ui 1.11.4) 
      $(".container").children('.collection').uniqueId().end().sortable({ 
       axis: 'y', 
       opacity: 0.9, 
       revert: true, 
       cursor: 'move', 
       update: function (event, ui) { 
        var order = $(this).sortable('toArray'); 
        $("#log").text(order); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div class="container"> 
     <div class="collection"> 
      Fruits 
      <ul collection="1"> 
       <li product="1">Watermelon</li> 
       <li product="2">Apple</li> 
       <li product="3">Grape</li> 
      </ul> 
     </div> 
     <div class="collection"> 
      Vegetables 
      <ul collection="2"> 
       <li product="4">Lettuce</li> 
       <li product="5">Tomato</li> 
       <li product="6">Carrot</li> 
      </ul> 
     </div> 
     <div class="collection"> 
      Others 
      <ul collection="3"> 
       <li product="7">Bread</li> 
       <li product="8">Cake</li> 
      </ul> 
     </div> 


    </div> 

    <hr> 

    <div id="log"></div> 
</body> 
</html>

來源

2016-11-18 13:07:35 RonyLoud

可訂購兒童元素排序組

回答

相關問題