🔰

SortableJSでかんたんリスト並び替え

2022/12/27に公開

JavaScript

SortableJSとは!?

SortableJSを利用する事で、並び替え機能を簡単に実装することができます。

SortableJS

今回はこのライブラリを使ってリストの並び替えを実装してみます。

プロジェクトを用意する

次の様にプロジェクトを作ります。

MyProject01/
　├ index.html (プログラムを起動するファイルです)
　├ custom.css (CSSを記述するファイルです)
　├ main.js (メインのプログラムを記述するファイルです)

HTMLファイルを用意する

では、作っていきましょう。
用意したHTMLファイルには次のコードを記述します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" href="./images/favicon.ico">
	<title>SortableJS</title>
	<!-- CSS -->
	<link rel="stylesheet" href="./custom.css">
</head>
<body>
	<div id="my_container">
		<div>
			<div>= SortableJS =</div>
			<ul id="my_sortable">
				<li id="item01">01,にくまん</li>
				<li id="item02">02,あんまん</li>
				<li id="item03">03,カレーまん</li>
				<li id="item04">04,ピザまん</li>
				<li id="item05">05,ぶたまん</li>
			</ul>
		</div>
	</div>
	<!-- JavaScript -->
	<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
	<script src="./main.js"></script>
</body>
</html>

CSSファイルを用意する

次はCSSファイルです。
リストの表示を整える程度です。

custom.css

/* custom.css */

html, body{
	width: 100%; height: 100%;
	margin: 0px; padding: 0px;
	background-color: silver;
}

#my_container{
	width: 100%; height: 100%;
	display: flex; flex-flow: wrap;
	justify-content: space-around;
	align-items: center;
}

#my_container div{
	margin: 0px; padding: 10px 30px;
	border-radius: 20px;
	background-color: gray; color: white;
	font-size: 2rem; text-align: center;
}

ul{
	margin: 0px; padding: 5px;
	background-color: silver; color: gray;
	font-size: 1.5rem; text-align: left;
	list-style: none;
}

ul li{
	margin: 0px; padding: 5px 0px;
	background-color: whitesmoke;
	border-bottom: solid gray 1px;
	border-radius: 5px;
}

JavaScriptファイルを用意する

メインの処理です。
JavaScriptファイルには次のコードを記述します。(今回の完成コードです)

main.js

console.log("main.js!!");

window.onload = (e)=>{
	console.log("onload!!");

	// 1, SortableJS
	const elem = document.getElementById("my_sortable");
	Sortable.create(elem, {
		animation: 150,
		onStart:  onStartEvent,  // 2-1, ドラッグ開始時
		onEnd:    onEndEvent,    // 2-2, ドラッグ終了時
		onChange: onChangeEvent, // 2-3, ドラッグ変化時
		onSort:   onSortEvent    // 2-4, 並び替え終了時
	});
}

function onStartEvent(e){
	console.log("onStart!!");
}

function onEndEvent(e){
	console.log("onEnd!!");
}

function onChangeEvent(e){
	console.log("onChange!!");
}

function onSortEvent(e){
	console.log("onSort!!");
	// 3, 並び替え後のエレメントを確認
	const items = e.target.querySelectorAll("li");
	for(let i=0; i<items.length; i++){
		console.log(items[i].getAttribute("id"));
	}
}

コードの解説

上記のコードについて、次の順番で解説を進めます。

SortableJSの準備
イベント処理各種
並び替え後の順序を確認

1,SortableJSの準備

"Sortable.create()"でSortableJSを準備します。
第一引数には対象のエレメント(ここでは"my_sortable")を、
第二引数には、様々なオプションやイベントを設定します。

主なオプション	用途
animation	アイテムの移動速度(ms)
delay	並び替え開始までの遅延(ms)
sort	並び替えの可否(初期値:true)
handle	並び替え用のハンドルを指定(ex: .handle)

2,イベント処理各種

並び替えの開始や終了時等、様々なイベントを取得する事が可能です。

主なイベント	用途
onStart	ドラッグ開始時
onEnd	ドラッグ終了時
onChange	ドラッグ変化時
onSort	並び替え終了時

3,並び替え後の順序を確認

最後に、"onSort()"で並び替え後の順序を確認してみます。
引数にある変数"e.target"から、順番に各エレメントを辿るだけです。

main.js(抜粋)

// 省略
function onSortEvent(e){
	console.log("onSort!!");
	// 3, 並び替え後のエレメントを確認
	const items = e.target.querySelectorAll("li");
	for(let i=0; i<items.length; i++){
		console.log(items[i].getAttribute("id"));
	}
}

これだけで簡単に並び替え機能を実装することができます。(やりました!!)

最後に

今回はSortableJSを利用してリストの並び替えを実装してみました。
他にも様々なオプションがあるので、公式サイトを確認してみてくださいね。
ここまで読んでいただき有難うございました。