Hello World?

JQuery로 Drag & Drop Down 으로 순서 바꾸기 본문

JQUERY/UI

JQuery로 Drag & Drop Down 으로 순서 바꾸기

쮠이 2015. 12. 17. 15:44

 아래처럼 목록 여러개가 있을 경우,  

 

 

 

 

조회시 DB에서는 ORDER NO 순서대로 정렬을 시킬수 있다

화면에서의 처리는 아래와 같다.

 

 <script>

  $(function() {
    $( "#sortable" ).sortable({
revert: true
    });
    $( "#draggable" ).draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
  });
  </script>

 

<ul>
  <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul> 

 

 

위의 소스에다가 AJAX 로 바꾼 아이템의 순서를 변경시키면 되지 않을까 한다

 

방법은 input 으로 각각의 아이템 번호와 order 순번을 넘겨주고, 해당 아이템들의 이동시 ordering  순번을 재조정하면 된다

 

저장 버튼이 있다면 한번에 ajax submit을 날리던가, 이동시 하나씩 날려주면 될것 같다

 

 

결재선 지정이나 목록형 프로그램 처리시 유용하게 써먹을수 있을 것 같다