[jQueryUI] 드래그를 이용한 데이터 정렬

Front-End/jQueryUI

[jQueryUI] 드래그를 이용한 데이터 정렬 - sortable()

리딩리드 2017. 1. 12. 15:14

드래그를 이용한 데이터 정렬 - sortable()

1. 정의

- sortable()응 이용하여 정렬 기능 설정

- 지정된 요소 아래의 자식 요소 정렬

- 많은 매개변수가 존재한다

2. 구문

- $('리스트/테이블 등..').sortable(매개변수명 : 값)

3. 예

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .helper{ border : 2px dotted red; } </style> </head> <table border="1px solid"> <thead> <th>No.</th><th>List</th> </thead> <tbody id="list"> <tr id="1"> <th>1</th><th>English</th> </tr> <tr id="2"> <th>2</th><th>Math</th> </tr> <tr id="3"> <th>3</th><th>Art</th> </tr> </tbody> </table> <div id="result"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function(){ $('#list').sortable({ cusor : 'move', //아이콘형태 opacity : 0.5, update : function(e, ui){ $('#result').text($('#list').sortable('toArray')); }// 드래그시 동작 }); }); </script>

- <tbody> 요소를 이용하여 데이터 행을 분명히 지정한다

- update 매개변수로 결과를 화면에 표시한다