2020-12-28/2023-05-23

ドラッグによる並び替えを実装する

ドラッグによる並び替えを実装する

今回はjavascriptでドラッグによる並び替えを実装してみたいと思います。

一見難易度が高そうですが、ライブラリのおかげで非常に簡単に取り扱うことができます。

まずドラッグによる並び替えがどんなものかというと以下のようなものです。

javascript
php
python
C#
COBOL

直感的に並び替えができるため順番等を決める際には導入したい要素です。

上の例を早速作成したいと思います。

SortableJSによる並び替えの作成

冒頭のような並び替えを実装するために「SortableJS」というJavaScriptライブラリを使用します。

リンクからダウンロードし、圧縮または非圧縮のどちらでも好きな方を使用してください。

使い方は簡単で使用したいリストにidを振ってあげるだけです。

後でCSSで整えるためにここではそれぞれのリストにクラスを振っています。

<div id="sort">
<div class="list-item">javascript</div>
<div class="list-item">php</div>
<div class="list-item">python</div>
<div class="list-item">C#</div>
<div class="list-item">COBOL</div>
</div>

作成下リストIDを使用してSortableのインスタンスを生成します。

new Sortable.create( sort, {
animation: 150,
ghostClass: 'ghost',
} );

animationはリスト動かす際のスピードになります。ghostClassはリストを移動させている際に付与するクラス名です。

例では「ghost」クラスで背景を青色にしています。

たったこれだけで上のようなドラッグ可能リストを作成できてしまいます。

さらに、ドラッグし始めたとき、並び替えが終わった時などのイベントリスナーはあらかじめ準備してあります。

そのあたりの記述が不要な点でも使用しやすいライブラリです。

2020 KumaTechLab.