jQuery UIのsortableを使ってドラッグアンドドロップで並び替え

よく一覧表示させておいてそれを並び替えさせたいときがあります。
今回はソート項目を指定して一括して並び替える方法ではなく、ある要素をドラッグアンドドロップで指定の位置に挿入しなおすということを容易にしてくれるjQuery UIのsortableというものを使います。

http://jqueryui.com/sortable/

jQueryとjQuery UIのライブラリを読み込む必要があります。

	<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

DIV要素を並び替える

デモ画面

html

<div id="sortable-div">
	<div class="ui-state-default">ブロック1</div>
	<div class="ui-state-default">ブロック2</div>
	<div class="ui-state-default">ブロック3</div>
	<div class="ui-state-default">ブロック4</div>
	<div class="ui-state-default">ブロック5</div>
</div>

ui-state-defaultクラスはjquery-uiで設定されている表示用のクラスです。

css

#sortable-div {
    width: 50%;
}

javascript

$(function(){
	$('#sortable-div').sortable();
});

外側のDIVを指定してsortable()を呼ぶと内側のDIV要素が並び変え可能になります。

LI要素を並び替える

デモ画面

html

<ul id="sortable-li">
	<li class="ui-state-default">項目 1</li>
	<li class="ui-state-default">項目 2</li>
	<li class="ui-state-default">項目 3</li>
	<li class="ui-state-default">項目 4</li>
	<li class="ui-state-default">項目 5</li>
</ul>

css

#sortable-li {
	padding: 0;
	list-style-type: none;
	width: 50%;

javascript

$(function(){
	$('#sortable-li').sortable();
});

UL要素を指定してsortable()を呼ぶとその子要素であるliが並び替え可能になります。

LI要素を並び替える

デモ画面

html

<table id="sortable-table">
	<thead>
		<tr>
			<th>番号</th><th>項目</th><th>備考</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td><td>項目1</td><td></td>
		</tr>
		<tr>
			<td>2</td><td>項目2</td><td></td>
		</tr>
		<tr>
			<td>3</td><td>項目3</td><td>なし</td>
		</tr>
		<tr>
			<td>4</td><td>項目4</td><td></td>
		</tr>
		<tr>
			<td>5</td><td>項目5</td><td></td>
		</tr>
	</tbody>
</table>

css

#sortable-table {
    width: 50%;
    border-collapse: collapse;
}
#sortable-table td, #sortable-table th {
    border: solid 1px black;
}

javascript

$(function(){
	$('#sortable-table tbody').sortable();
});

テーブルの各行を並びかえる場合にはtbodyを指定してsortable()を呼ぶ必要があります。

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

以上