정렬순서를 바꾸고싶다면 jQueryUI의 드래그앤드롭기능을 이용하자

개발로짜 2014. 6. 20. 15:13

가끔가다 테이블의 정렬순서를 변경할 때가 존재한다.

이럴때 버튼클릭으로 순서를 바꾼다던지,

아니면 정렬 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을 드래그 하고싶다면 ?

↓↓↓↓↓↓

위 포스팅을 보도록 하자 ^^