2016-11-08 1 views
0

제품과 다른 테이블 컬렉션이 인 MySQL 테이블이 있습니다.정렬 할 수있는 그룹 어린이를위한 요소

모든 컬렉션에는 일부 제품이 포함되어 있습니다 (단, 일부 제품에는 컬렉션이 없음).

나는이 같은 제품 열에서 수집 id를 저장 :

나는이 방법으로 모든 제품을 보여 관리자 패널에서

:

그러나 이제 정렬 할 수 있도록 그룹별로 그룹화해야합니다.

실제로 제품은 (jQuery UI을 사용하여) 정렬 가능하며 제품을 순서대로 표시 할 수 있도록 데이터베이스에 주문을 저장합니다.

각 컬렉션의 모든 제품을 그룹화하고 해당 그룹을 재정 의하여 제품이 주문을 변경하도록하려면 어떻게해야합니까? https://jsfiddle.net/jimmyadaro/mty2br9n/

+0

누군가가 도움을 제공 할 수를 다시하기 위해 실제 로직의

MCVE? ... –

답변

0

당신이 fiddle 같은 html로 뭔가를 포맷해야합니다 :

<!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>