jQueryUI 5장 - sortable을 이용하여 목록순서 변경하기
댓글
클라이언트들이 목록의 정렬순서를 변경할 수 있게 해달라는 요구사항이 들어오곤합니다.
대부분 목록 옆에 화살표아이콘을 이용하여 클릭시 한줄씩 이동시키게 하거나
input text태그를 만들어서 정렬순서를 입력하게끔 하는 방식을 가~~끔 보았습니다.
하지만 jQueryUI에서는 sortable이라는 함수를 이용하여 드래그앤드롭으로 목록의 순서를 변경이 가능합니다.
우선 HTML 태그를 작성해보도록 합니다.
1 2 3 4 5 6 7 | <h2>목록 정렬순서 변경하기</h2><div id="sortable"> <div>첫번째목록</div> <div>두번째목록</div> <div>세번째목록</div> <div>네번째목록</div></div> |
위와같이 코드를 작성한 다음 간단하게 스타일을 입혀보도록 하겠습니다.
1 2 3 4 5 6 7 8 | #sortable div { margin: 0 3px 3px 3px; padding: 0.4em; height: 18px; border-style: solid; border-width: 1px; background-color: yellow; } |
마지막으로 sortable 함수를 스크립트상에서 호출하도록 합니다.
1 2 3 | $(function(){ $("#sortable").sortable();}) |
sortable 함수 호출하는 셀렉터는 목록을 감싸고 있는 부모태그를 정의해주어야 합니다.
실행결과를 확인해보겠습니다.
드래그앤드롭 기능을 이용하여 정상적으로 목록순서가 변경이 완료 되었습니다.
table태그로는 sortable 기능이 제대로 동작되지 않습니다.
table 태그목록의 순서를 변경하고 싶으시다면 하단 포스팅을 참고해주세요
2014/10/15 - [코드저장소/jQuery 플러그인] - jQuery tablednd 플러그인을 사용하여 테이블을 드래그앤드롭으로 순서변경하기
by 개발로짜
'웹개발강좌 > jQueryUI' 카테고리의 다른 글
| jQueryUI 4장 - autocomplete 함수를이용하여 Ajax 비동기 자동완성 구현해보기 (9) | 2014.11.06 |
|---|---|
| jQueryUI 3장 - 다양한 레이아웃을 만들어보자(어코디언,탭,레이어팝업) (0) | 2014.11.05 |
| jQueryUI 2장 - 다양한 입력태그에 달력,스피너,슬라이더 등 각종 UI 적용해보기 (0) | 2014.11.04 |
| jQueryUI 1장 - 테마선택하여 다운로드 후 간단하게 버튼태그에 UI 적용하기 (0) | 2014.11.04 |
댓글(Comment)