jQuery Sortable を利用してドラッグで順番の変更ができる、階層構造のリストのコードを紹介します。
概要
こちらの記事ではjQuery UIを利用してドラッグで順番の変更ができるリストのコードを紹介しました。リストがネストされている場合はjQuery UIのSortableでは対応できません。この記事では、jQuery Sortable を利用してリストがネストされている場合でもドラッグにより項目の順番を変更できるリストのコードを紹介します。
プログラム
事前準備
jQueryとjQuery Sortableを導入します。jQueryのインストールは
こちらの記事を参照してください。また、jQuery Sortableは
こちらの記事を参照してJavaScriptファイルをダウンロードしてください。
コード
下記のコードを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="NestedSortableDemo01.css" />
<script src="scripts/jquery-3.3.1.js"></script>
<script src="scripts/jquery-sortable.js"></script>
<script type="text/javascript">
$(function () {
$('#sample').sortable();
});
</script>
</head>
<body>
<ul id="sample">
<li>
Item 1
<ul>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>
Item 5
<ul>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</li>
</ul>
</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
</body>
</html>
body.dragging, body.dragging * {
cursor: move !important;
}
.dragged {
position: absolute;
opacity: 0.5;
z-index: 2000;
}
ul.sample li.placeholder {
position: relative;
}
ul.sample li.placeholder:before {
position: absolute;
}
解説
IDを指定して、ソート可能にしたいリストの要素に対して、sortable()メソッドを呼び出してドラッグでソートできるようにします。
$(function () {
$('#sample').sortable();
});
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[Item3]の項目をドラッグします。ドラッグすると項目が移動できます。
下方向にドラッグすると、挿入箇所の位置が変化します。
要素をドロップし、ドラッグを終了するとドロップした位置に要素が移動します。
続いて[Item1]をドラッグします。Item1の子要素を含めてドラッグで移動できます。
ドラッグすると、挿入箇所の位置が変化します。
要素をドロップすると、項目の位置を変更できます。
[Item5]をドラッグします。Item5の子要素もまとめて移動できます。
ドロップすると項目の位置が変更できます。
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2024-01-06
作成日: 2019-02-26
