リストをドラッグで順番入れ替えする「SortableJS」を実装

たくさんある記事の順番入れ替え、商品リストの順番入れ替えなどがドラッグでできると直感的ですよね。
今回は、リストの順番入れ替えがドラッグで視覚的にできちゃう「SortableJS」の動作サンプルをご紹介します。

動作の様子

実際に触ってみよう

See the Pen SortableJSでリストをドラッグで順番入れ替え by may9 (@may9) on CodePen.

※上記のCodePenでうまくドラッグで動かんぞ！？と思ったら、CodePenの実際のページに見に行ってみると動いているのではないかと思います（上記の埋め込みの右上「EDIT ON CodePen」のところをクリックすると実際の動作サンプルページに行けます）

公式

こちらにも導入方法やオプションなども書いてありますね。（と、英語がチンプンカンプンな筆者がさらっと言う笑）

使い方について

jQueryとSortableJSを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js" charset="UTF-8"></script>
<script src="https://sortablejs.github.io/Sortable/Sortable.js" charset="UTF-8"></script>

※読み込みはhead内でも</body>直前あたりでもOK！

リスト部分のHTML

input.html

<ul id="list_sortable" class="list_sortable">
  <li>ハンバーガー</li>
  <li>テリヤキバーガー</li>
  <li>チーズバーガー</li>
  <li>チキンバーガー</li>
  <li>ポークバーガー</li>
</ul>

※ハンバーガーアイコンはコード上は消してます（どうでもいい）

CSS

style.css

/* common */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

/* main parts css */
.list_sortable{
  width:100%;
  max-width:500px;
}
.list_sortable li{
  padding:10px;
  background:#F9F7F7;
  list-style:none;
  margin-bottom:3px;
  cursor:move;
}
.list_sortable li:hover{
  background:#112D4E;
  color:#fff;
}

「/* common */」の部分はcss界隈でよくあるreset.cssとかに既に書いてあるかもしれないので、不要な場合は適宜削除してください。

js

general.js

$(function(){
  new Sortable(list_sortable, {
    animation: 150
  });
});

id="list_sortable"とjs内のlist_sortableを同じ名前にします。
上記だと

    animation: 150

の部分がアニメーション（ドラッグした時のコロコロっとリストが動く感じの部分）のスピードを決めています。

Caution
cssでliに対して「transition: all 0.5s 0s ease;」などのtransitionプロパティを指定すると、js側のanimationが効かなくなりました（コロコロっとしたリストの動きが無くなっちゃいました。。）↓こんな残念な感じ😂

リストをドラッグで移動させたときのなめらかな感じがないですよね…。
ということで、cssでのアニメーション関連のプロパティとのバッティングに注意しましょう！

まとめ

ドラッグでリストの順番入れ替え、いかがだったでしょうか？
このライブラリを使って、DBの商品一覧の順番を入れ替えてみたり記事の順番を入れ替えてみたり、そんなことができると便利ですよね！（今はまだDBへの反映はできておりません；_；頑張れ自分…！）

この「SortableJS」は、二つのリストを並べて、一方のリストからもう一方のリストへ要素を移動させたり、と言うようなことも可能です。それについてはまた別の機会に動作サンプルをまとめようと思います。

このパーツは下記の記事「cakePHP4でカートを作ってみる」の制作工程の1つになります。