サイト制作に関するメモ書き

HOME > JavaScript > SortableJSを使ってみる

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で順番を管理するデモページ

オプション

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

group リスト名と別のリスト間の移動について設定。
初期値はnull。
name: リスト名を指定。
pull: 別のリストへ移動可能かどうか設定。trueの場合は移動可能、falseの場合は移動不可、’clone’の場合は移動可で元のリストにもアイテムを複製して残す。
put: 他のリストからの移動を受け入れるかどうかを設定。
デモページ
sort リスト内の並び替えを許可するかどうかを設定。
初期値はtrue。
デモページ
delay 並び替え開始のタイミング(時間)を設定。
初期値は0。
デモページ
delayOnTouchOnly delayのオプションをタッチデバイスのみ適用するかどうかを設定。
初期値はfalse。
デモページ
disabled ソートを無効にするかどうか設定。
初期値はfalse。
デモページ
handle リスト項目内でドラッグ可能な範囲(要素)を設定。
デモページ
ghostClass 選択中のアイテム(リストに表示されているアイテムのみ)に付与されるclass名の設定。
初期値は’sortable-ghost’。
デモページ
chosenClass 選択中のアイテム(リストのアイテム・ドラッグで動かしているアイテムの両方)に付与されるclass名の設定。
初期値は’sortable-chosen’。
デモページ

イベント

イベントのデモページ

onChoose アイテムを選択した時に発火。
onStart アイテムを選択後、ドラッグ開始した時に発火。
onEnd アイテムのドラッグが終力した時に発火。
onAdd 別のリストからアイテムが追加された時に発火。
onUpdate リストの並び順を変更したときに発火。
onSort リストが変更(追加/更新/削除)された時に発火。
onRemove 別のリストへアイテムが移動してリストから削除された時に発火。
onChange アイテムをドラッグして並び順を変更したときに発火。
onUnchoose アイテムの選択を解除した時に発火。

 

【参考サイト】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP