表をドラッグ & ドロップで並び替えたい

はじめに

表をドラッグ & ドロップで並び替える必要があったのですが、なにか良いライブラリがないか探すとSortableJSというのがあり使ってみると便利だったので紹介したいと思います。

インストール

npm

npm install sortablejs

CDNもあります

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

使い方

並び替えたいhtml要素を用意します。
※わかりやすくするためにbootstrapでcssを適用しています

html

<table class="table table-bordered w-25">
    <tbody id="sort-table">
    <tr><td>１行目</td></tr>
    <tr><td>2行目</td></tr>
    <tr><td>3行目</td></tr>
    </tbody>
</table>

用意したhtml要素をjsで取得して、SortableJSに設定します。

js

// 以下のいずれかでSortableJSを読み込みます
// CDNの場合は不要です
import Sortable from 'sortablejs';
const Sortable = require('sortablejs/Sortable');

// html要素を取得をしてSortableJSに設定します
const sortElement = document.getElementById('sort-table');
Sortable.create(sortElement);

たったこれだけで並び替えができます。

html要素はtableタグ以外でも利用できます。

ul、liタグ

html

<ul id="sort-table">
    <li>1行目</li>
    <li>2行目</li>
    <li>3行目</li>
</ul>

divタグ

html

<div id="sort-table">
    <div>1行目</div>
    <div>2行目</div>
    <div>3行目</div>
</div>

こんな使い方はしないと思いますが、以下のように子要素が異なるタグでも適用できます。

html

<div id="sort-table">
    <p>1行目</p>
    <div>2行目</div>
    <section>3行目</section>
</div>

オプション

SortableJSにはオプションがあり、これらを利用することで簡単に機能の拡張ができます。

js

const sortElement = document.getElementById('sort-table');
Sortable.create(sortElement, {
    handle: '.handle', // ドラッグのトリガーをセレクタで指定します
    chosenClass: 'chosen', // ドラッグで選択中の要素に付与するクラス名
    animation: 200, // ドラッグして並び替える時のアニメーションの速さを指定します
});

css

<style>
    .chosen {
        background-color: #e0ffff;
    }
</style>

html

<table class="table table-bordered w-25">
    <tbody id="sort-table">
    <tr><td><button class="handle">:</button>１行目</td></tr>
    <tr><td><button class="handle">:</button>2行目</td></tr>
    <tr><td><button class="handle">:</button>3行目</td></tr>
    </tbody>
</table>

まとめ

SortableJSを使うことで、ドラッグ & ドロップでの表の並び替えが簡単にできました。
公式のデモページには他にもたくさんのサンプルがあったので、まだまだ色々できそうです。