jQuery tableDnD을 이용하여 드래그앤드롭으로 테이블 목록 순서바꿔보기

tableDnD는 참 유용한 플러그인 중 하나이다

테이블 드래그앤드롭 플러그인 개발자 블로그

http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

드래그앤드롭 플러그인 다운로드

https://github.com/isocra/TableDnD

다운로드 페이지에서 우측에 Download Zip버튼을 클릭하여 다운로드 받도록 하자

압축 해제 후, stable폴도 밑에 있는 jquery.tablednd.js 파일을 프로젝트에 넣어놓자

2013년12월말일날 최종업데이트 버전인거 같다..

jquery와 다운받은 jquery.tablednd.js를 import 시켜보자

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="/tablednd/jquery.tablednd.js"></script>

스크립트 소스는 다음과 같다

$(function(){
	//tableDnD(이안에 여러 옵션들을 지정해 줄 수 있다.)
	/*
		example : 
		tableDnD(
			{
				//드래그 기능이 동작하는 동안 특정 CLASS를 드래그하는 TR에 적용해준다.
				onDragStyle : 'css제어',
				onDropStyle : '드롭기능시 스타일',
			        onDragClass: '클래스지정',
			        //드래그한 후 드롭이벤트가 일어날 경우의 이벤트
			        onDrop: function(table, row) {
			        	console.log("드롭!!");
			        },
			        onDragStart: function(table, row) {
			        	console.log("드래그 시작!");
			        }
			}
		);
	*/
	$("#tableId").tableDnD();
})

마지막으로 샘플용 테이블 html 태그이다

	<table id="tableId" border="1" style="width: 800px;">
		<tr style="background-color: red;">
			<td width="100%">1</td>
		</tr>
		<tr style="background-color: yellow;">
			<td>2</td>
		</tr>
		<tr style="background-color: blue;">
			<td>3</td>
		</tr>
		<tr style="background-color: green;">
			<td>4</td>
		</tr>
	</table>
   

화면을 실행 후, 테이블의 row를 드래그앤드롭을 해보자 

잘~~ 될것이다!!