はじめに
Webサイトを構築する上で、「ドラッグ&ドロップを綺麗に見せたい」と思ったことはないでしょうか。
その希望を叶えてくれる便利なライブラリ "SortableJS" について紹介します。
SortableJSとは
比較的短く、簡素なコードでドラッグ&ドロップを実現することができるライブラリです。
下記リンクにてgithubで無料公開されています。
https://github.com/SortableJS/Sortable
実際どのような機能なのか、利用例はこちら
https://yizm.work/sample_code/javascript/sortablejs_howto/
特徴
- Star総数22万7千
- おそらく多くの方が利用
- 幅広いブラウザに対応している
- Chrome, Edge, Safari, FireFox等、一般に普及しているブラウザに対応しており、スマホのブラウザにも対応
- 対応ブラウザ・バージョンはこちら
-
長年保守され続けている
- 公開されたのは2013年
- 今日2021年6月において、最終master更新は2021年5月9日
-
issueがそこそこ解決されている
- 今までに立てられたissueの数は1500以上
- そのうち1200以上のissueがclose
以上の観点より、今後仮に新しいブラウザが出来たとしても対応される可能性が高く、利用しやすいのではないかと思います。
使い方
githubからインストールしたディレクトリを自分のプロジェクト下に置き、以下の階層にあるjsを読み込みます。
Sortable-master/Sortable.min.js
htmlからに呼び出すときは以下のようになるかと思います。
js
<script type="text/javascript" src="https://yoursite.com/Sortable-master/Sortable.min.js"></script>
実装
以下より引用
https://yizm.work/sample_code/javascript/sortablejs_howto/
普通の並べ替え
html
<ul id="sample1" class="samplelist">
<li>これで、並べ替えができる</li>
<li>様になっている</li>
<li>はずなんだ。</li>
</ul>
js
var sample1 = document.getElementById('sample1');
var sortable1 = Sortable.create(sample1);
アニメーション付き
js
var sample2 = document.getElementById('sample2');
var sortable2 = Sortable.create(sample2, {animation: 100});
ドラッグアンドドロップできるハンドル要素指定
html
<ul id="sample3" class="samplelist">
<li><span class="srt_hndl">❤</span>ラベル選択できる？</li>
<li><span class="srt_hndl">❤</span>たまーに、コピペしようとして</li>
<li><span class="srt_hndl">❤</span>選択できないのってアレだよね。</li>
</ul>
js
var sample3 = document.getElementById('sample3');
var sortable3 = Sortable.create(sample3, {animation: 100, handle:".srt_hndl"});
おわりに
webサイトを構築する際、ライブラリの選択基準に「今後も保守され続けるか」という観点はとても重要ではないでしょうか。SortableJSは実装においてとても便利なライブラリであり、そこそこ保守されていますので、ドラッグ&ドロップ実装の際には是非ご検討ください。