【JavaScript】SortableJS：ドラッグ＆ドロップによるリストの並び替え機能の実装

2023.12.18 / 2023.12.18

本記事ではJavaScriptのSortableJSライブラリを利用した、ドラック＆ドロップによるリストの並び替え機能を実装する方法について解説していきます。

Webアプリケーションでリストやテーブルの要素をドラック＆ドロップで並び替えできるようにしたい場合、SortableJSを利用すると簡単に並び替え機能を実装できます。

簡単に利用することができ、かつ無料で使用することができます。

本記事を通して、SortableJSによるリストやテーブルの並び替え機能の実装方法について理解を深めてください。

SortableJS

SortableJSとは

SortableJSとはリストをドラッグ＆ドロップで並び替えられる機能を実装できるJavaScriptライブラリです。

jQueryに依存することなく利用できるライブラリです。「jQuery UI」でもリストのソート機能（sortable）は備わっていますが、jQueryに依存しない脱jQueryの方はSortableJSを利用しています。

SortableJSは主要なブラウザはサポート（IE9を含む）しています。またAngularやReact、Vueもサポートしています。詳しくは以下サイトをご覧ください。

GitHub – SortableJS

SortableJSが公開されたのは2013年ですが、10年以上経った現在でも継続的にバグの修正やアップデートがされ続けており安心して利用できます。

SortableJSはMITライセンスのため商用での利用も可能です。

SortableJSの機能

SortableJSで利用できる機能の一部を以下に記します。

SortableJSの機能

並び替え可能なリスト表示
複数のリストで並び替えおよび入れ替え可能なリスト表示
複数のリストでドラック＆ドロップでクローンを作成できるリスト表示

上記のような機能がSortableJSを使用することで簡単にWebアプリケーションに実装できます。

SortableJSの使用方法

SortableJSライブラリの導入

SortableJSを利用できるようにJSファイルをWebアプリケーションに組み込みます。JSファイルの組み込み方法としては以下いずれかの方法を使用します。

CDN
githubからダウンロード
npmからインストール

CDNを利用する場合は以下のコードを記述します。

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

Githubからダウンロードする場合はGitHub – SortableJSにアクセスし、「Sortable.min.js」をダウンロードしてください。ダウンロードしたJSファイルをWebアプリケーション内の特定の場所に置き、以下のように利用できるようにコードを記述します。

<script type="text/javascript" src="js/Sortable.min.js"></script>

npmでインストールする場合は以下のコマンドを実行してインストールして使用します。

npm install sortablejs --save

対象のリストにid属性を追加

並び替え操作したいリストにid属性を追加して、JavaScriptで要素を指定できるようにします。以下に例を記します。

<ul id="lang">
    <li>PHP</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>Python</li>
    <li>Perl</li>
</ul>

SortableJSで並び替えを行えるようにする

id属性を追加したリストをSortableJSで並び替えができるようにします。まずgetElementByIdメソッドなどを使ってリストの要素を取得します。

<script>
    $(function(){
        var el = document.getElementById('lang');
    });
</script>

次にSortable.create()を使ってリストを並び替えできるようにします。以下構文に従って記述します。

構文

Sortable.create(取得した要素, オプション);

オプションには次のようなものがあります。

オプション名	説明
sort	ソートの可否
animation	並び替えのアニメーションスピード
handle	ドラッグできる要素の指定
group	ドラッグ＆ドロップを可能にするグループ名
onStart	ドラッグ開始時のイベントを指定
onEnd	ドラッグ終了時のイベントを指定
onChoose	要素を選択しているときのイベントを指定

以下のように記述するだけでリストを並び替えできるようになります。

<script>
    $(function(){
        var el = document.getElementById('lang');
        var sortable = Sortable.create(el, {
            animation: 150,
        });
    });
</script>

実際にSortableJSで並び替え可能にしたリストを以下に表示します。

PHP
HTML
CSS
Python
Perl

複数のリストで入れ替え＆並び替え

複数のリストで要素の入れ替えや並び替えを行う場合、JavaScriptは以下のように記述します。

<script type="text/javascript">
    $(function(){
        var el_left = document.getElementById('lang-left');
        var sortable = Sortable.create(el_left, {
            group:'share',
            animation: 150,
        });
        var el_right = document.getElementById('lang-right');
        var sortable = Sortable.create(el_right, {
            group:'share',
            animation: 150,
        });
    });
</script>

ここで重要なのが各リストをオプションgroupで同じグループ名を付ける点です。これにより同じグループ名のリストはリスト間で要素を入れ替えたりできるようになります。以下に例として入れ替え可能なリストを表示します。