jQuery tablednd 플러그인을 사용하여 테이블을 드래그앤드롭으로 순서변경하기

이번에 소개할 jQuery 플러그인은 tablednd가 되겠습니다.

jQueryUI에서도 sortable이라는 기능을 지원을 하기는 하지만 이 부분은 추후에 포스팅하기로 하겠습니다.

일반적으로는 테이블 우측에 위/아래로 버튼을 생성하여 테이블 순서를 변경을 하는것을 가끔 보았습니다.

버튼 클릭해서 한줄씩 변경하는것보다는 마우스 클릭 후 드래그앤드롭 기능을 이용하여 

테이블의 정렬순서를 바꾸는것이 편한건 사실이겠죠?

그럼 tablednd 플러그인을 이용하기 위하여 플러그인을 다운로드 받도록 하겠습니다.

하단 링크를 가셔서 우측 Download ZIP버튼을 클릭하시면 됩니다.

https://github.com/isocra/TableDnD

다운로드를 받으셨다면 압축 해제 후 

/TableDnD-master/js/ 디렉토리 이동 후 jquery.tablednd.js 파일만을 복사하여 

프로젝트 경로에 include 해주도록 합니다.

그럼 기본적인 구조로 예를 들어보도록 하겠습니다.

테이블 정렬을 위한 기본 include

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.tablednd.js"></script>

데이터 정렬을 위한 table html 태그

<table border="1" style="width: 500px;">
    <tr>
    	<td>1</td><td>첫번째</td>
   	</tr>
    <tr>
    	<td>2</td><td>두번째</td>
   	</tr>
    <tr>
    	<td>3</td><td>세번째</td>
   	</tr>
    <tr>
    	<td>4</td><td>네번째</td>
   	</tr>
    <tr>
    	<td>5</td><td>다섯번째</td>
   	</tr>
</table>

tablednd 드래그앤드롭 실행 스크립트

$(function(){
	$("table").tableDnD();
})

한번 위의 코드들을 적용한 소스를 실행해보도록 하겠습니다.

테이블 정렬순서 변경코드 실행하기

위처럼 변경하고자 하는 row를 누른다음 드래그를 하면 위치 이동이 되면서 드롭을 하면 정렬순서가 변경이 됩니다.

기본적인 연동방법에서 추가로 드래그하고자 하는 row를 클릭했을경우 class를 지정하여 색상을 지정해 보겠습니다.

임의의 클래스를 하나 만들어보겠습니다.

.dragRow {
	background-color: red;
}

위와 같은 클래스를 선택된 테이블 row에 적용을 하기위해서는 

tableDnD 속성을 다음과 같이 변경해주시면 되겠습니다.

$(function(){
	$("table").tableDnD({
		onDragClass: "dragRow"
	});
})

한번 실행해보도록 하겠습니다.

드래그앤드롭시 클래스적용 결과

위와같이 드래그 시작시점에 정의한 css가 적용이되고 드롭시점에서 css가 초기화 되는 결과를 확인 할수 있었습니다.

by 개발로짜