jQuery-UI sortable 사용해보기

어떤 아이템들의 순서가 존재하고 사용자 화면단에서 유연하게 순서를 조작하는 방법으로는 jQuery-ui의 sortable기능을 사용하는 방법이있다.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 

$('#subitemlist').sortable({
  handle : 'label',             // label 태그로 핸들링 
  start: function(e, ui) {
    // 이동 시킬 아이템 클릭 시
    $(this).attr('data-previndex', ui.item.index()); // 기존 순서값을 data-previndex에 저장 
  },
  update : function(e,ui){
    // 이동 완료 후,  순서를 서로 바꿔줌 
    var newOrd = Number(ui.item.index()) + 1; // index값이 0에서 시작하기 때문에 1 더하기 
    var oldOrd = Number($(this).attr('data-previndex')) + 1;
    var grpno = "${param.grpno}"; // item group key
    
    $.ajax({
      type: "POST",
      url: "/changeItemsOrder",   // 서버단 메소드 url 
      data : {grpno':grpno, 'neword':newOrd, 'oldord':oldOrd},
      dataType  : "json", 
      success  : function(data) {
        // 정상적으로 response 시 
        // To Do ..
      }
    });
  }
});

위와 같이 tbody에 sortable 기능을 입혀준다.(tbody 여야만 작동함.)

<table>
  <caption></caption>
  <colgroup>
    <col width="*%" />
  </colgroup>
  <tbody id="subitemlist">
    <c:forEach items="${vo.itemlist }" var="list">
      <tr id="tr${list.itemno }">
        <td>
          <label style="cursor: move;">${list.itemname}</label>
          ${list.content}
        </td>
      </tr>
    </c:forEach>
  </tbody>
</table>
 

위와 같이 vo의 itemlist를 tr로 구성시키게 되면, label부분을 클릭하여 순서를 변경시키는 기능을 추가할 수 있다.