가끔가다 테이블의 정렬순서를 변경할 때가 존재한다.
이럴때 버튼클릭으로 순서를 바꾼다던지,
아니면 정렬 text값을 직접 지정해줘야 한다던지...
이런식으로 할때도 있지만
이왕이면 좀더 깔끔하게 drag&drop기능을 사용하여
순서를 변경시켜보자~
우선은 가상의 테이블 리스트를 html 소스로 짜보자
HTML 코드
<ul id="sortable"> <li>홍길동</li> <li>이순신</li> <li>스티븐잡스</li> <li>웨인루니</li> </ul>
위의 소스는 가상의 테이블 리스트이다.
하지만 해당 소스로만 뿌리면 화면이 기본적인 목록으로만 뽑힌다.
별로 어떻게 나뉘는지도 모르겠고 그냥 심플하게 css를 주기로 한다.
나는 미적감각이 없으니 그냥 눈으로 확인할수 있는 정도로만 스타일을 주도록.. ㅋㅋ
CSS에 들어갈 STYLE 코드
li { list-style: none; border-width: 1px; border-style: solid; border-color: red; padding : 10px; }
위의 css를 적용하면
다음과 같이 화면이 조금 바뀌었다.
이제는 드래그 기능을 적용 시켜보도록 해보자
적용 스크립트는 다음처럼 작성해주면 되겠다.
$(function(){ $( "#sortable" ).sortable(); })
해당 스크립트 코드만 적용해주면 각각의 row가 드래그가 된다.
실행화면
이동 깔끔하게 잘~ 된다 ..
만약 div나 li태그가 아닌 테이블의 tr을 드래그 하고싶다면 ?
↓↓↓↓↓↓
위 포스팅을 보도록 하자 ^^
jQueryUI의 탭기능을 이용하여 컨텐츠를 나눠보도록 해보자 (0) | 2014.06.20 |
---|---|
jQueryUI tooltip함수를 이용하여 영역에 포커스 발생시 말풍선을 띄우기 (0) | 2014.06.20 |
모달창을 띄우고 싶다면 jQueryUI의 DIALOG 함수를 이용해보자 (0) | 2014.06.20 |
jQueryUI에서 제공하는 Accordion을 이용해보자 (0) | 2014.06.20 |
jQueryUI에서 지원하는 달력 컴포넌트를 이용하여 TEXT태그에 값넣어보기 (0) | 2014.06.19 |