jQuery UIのSortableを使って、入れ子項目の並び替えをしたいのですが、入れ子項目が外に出てしまい親子関係が崩れてしまうということがありました。
今回は、入れ子項目の並び替えを行い、親子関係を保った並び替え方法をご紹介します。
やりたいこと
まずやりたいことは、以下になります。
- 親子関係を保って、入れ子項目を並び替える
- 親要素を並び替える際、子要素も連動する
それでは、早速やっていきます。
コード準備
並び替えリストを作成
並び替えリストをHTMLで用意します。
<ul class="sortable">
<li>
<span>item ①</span><i class="fas fa-arrows-alt-v handle"></i>
</li>
<li>
<span>item ②</span><i class="fas fa-arrows-alt-v handle"></i>
<ul class="sortable">
<li>
<span>item ①</span><i class="fas fa-arrows-alt-v handle"></i>
<ul class="sortable">
<li>
<span>item ①</span><i class="fas fa-arrows-alt-v handle"></i>
</li>
<li>
<span>item ②</span><i class="fas fa-arrows-alt-v handle"></i>
</li>
<li>
<span>item ③</span><i class="fas fa-arrows-alt-v handle"></i>
</li>
</ul>
</li>
<li>
<span>item ②</span><i class="fas fa-arrows-alt-v handle"></i>
</li>
<li>
<span>item ③</span><i class="fas fa-arrows-alt-v handle"></i>
</li>
</ul>
</li>
<li class="items">
<span>item ③</span><i class="fas fa-arrows-alt-v handle"></i>
</li>
</ul>これで、リストの準備ができました。
Sortableで並び替えを可能にする
次に、jQuery UIのSortableで先ほどのリストを並べ替えできるようにします。
head内に「jQuery」と「jQuery UI」を読み込み、Sortableを実装すると以下のようになります。
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script>
$( function(){
// リストを並べ替え可能にする
$(".sortable").sortable({
});
});
</script>
</head>実装
実装したものが、以下のようになります。
See the Pen sortable2 by Jun Yamagami (@Jun-Yamagami) on CodePen.
入れ子記事で並び替えのポイント
親子関係を守って入れ子項目の並び替えるポイントですが、とても簡単なことです。
親子関係の親要素に並び替えを行うidもしくはclassを付与させればいいということになります。
この記事の掲載しているコードだと、「$(".sortable").sortable({...」となりますので、親要素に「sortable」というclassを付与すればいいということになります。
まとめ
とても簡単に親子関係を守って、入れ子項目を並び替えることが出来ます。
jQuery UI Sortableには、オプションやメゾット、イベントを指定することで保存や制御ができたりします。
気になる方は是非検索してみて下さい。
