SortableJSを使ってみる

ドラッグアンドドロップでリストの並び替えができるJavaScriptライブラリ「SortableJS」を使ってみます。

設定方法

インストール方法はいくつかあるので、公式のドキュメントを参考ください。
インストール後、jsファイルを読み込みます。

<script src="Sortable.min.js"></script>

並び替えのリストを用意します。

<ul id="items">
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
</ul>

ライブラリの設定を行います。

var el = document.getElementById('items');
var sortable = Sortable.create(el);

これで並び替えの処理を追加できました。
並び替えのデモページ

ドキュメントでの説明だとリストとなっていますが、tableタグなどでも動作するようです。
ただtableタグを使う際の注意点として、tableではなくtbodyに対して並び替えの設定をする必要があります。

<table>
	<thead>
		<tr>
			<th>name</th>
			<th>birthday</th>
		</tr>
	</thead>
	<tbody id="tbody">
		<tr>
			<td>リゼ・ヘルエスタ</td>
			<td>5/25</td>
		</tr>
		<tr>
			<td>アンジュ・カトリーナ</td>
			<td>9/30</td>
		</tr>
		<tr>
			<td>戌亥とこ</td>
			<td>9/9</td>
		</tr>
	</tbody>
</table>

ライブラリの設定は先ほどとほぼ変更ありません。

var el = document.getElementById('tbody');
var sortable = Sortable.create(el);

tableでの並び替えのデモページ

実際に並び替えを使用する場合、並び替え後の順番をinputに格納してフォームで送信ような流れが考えられます。
並び替えのリストの中にinputを用意して、順番を送信できるように処理を作ってみます。

<ul id="list">
	<li>
		<input type="text" name="no[1]" value="1" size="3" class="no" />
		<input type="text" name="name[1]" value="リゼ・ヘルエスタ" />
		<em class="handle">ここで移動</em>
	</li>
	<li>
		<input type="text" name="no[2]" value="2" size="3" class="no" />
		<input type="text" name="name[2]" value="アンジュ・カトリーナ" />
		<em class="handle">ここで移動</em>
	</li>
	<li>
		<input type="text" name="no[3]" value="3" size="3" class="no" />
		<input type="text" name="name[3]" value="戌亥とこ" />
		<em class="handle">ここで移動</em>
	</li>
</ul>

.noが順番を管理するinputです。
確認用にtypeをtextにしていますが、実際にはhiddenにして非表示で大丈夫です。

JavaScriptはリストが変更された時に発火するイベントを使って、並び順を調整するようにします。

var el = document.getElementById('list');
var sortable = Sortable.create(el, {
	handle: '.handle',
	onSort: function(evt) {
		var items = el.querySelectorAll('li');
		for (var i = 0; i < items.length; i++) {
			items[i].querySelector('.no').value = i + 1;
		}
	}
});

これで並び替えをした際に、アイテム毎の順番を管理できるようになりました。
inputで順番を管理するデモページ

オプション

オプションの項目の中からいくつか試してみます。
詳しくは公式のドキュメントをご確認ください。

イベント

イベントのデモページ