ドラッグ並び替えリスト
項目をドラッグして並び替えられるリストを、外部ライブラリなしの素の JavaScript で実装した例です。各 li に draggable="true" を付け、HTML標準のドラッグ＆ドロップ API を使います。 dragstart でつかんだ要素を覚え、半透明にして掴んでいる感を出します。
解説
項目をドラッグして並び替えられるリストを、外部ライブラリなしの素の JavaScript で実装した例です。各 li に draggable="true" を付け、HTML標準のドラッグ＆ドロップ API を使います。dragstart でつかんだ要素を覚え、半透明にして掴んでいる感を出します。dragover ではマウスが項目の上半分か下半分かを getBoundingClientRect で判定し、insertBefore で挿入位置を入れ替えます。落とす先のヒントとして drag-list__item--over で枠を光らせるのも気が利いた点です。
使う場面
- やることリストや優先順位の手動ソート
- ダッシュボードのカードやウィジェットの並び替え
- アンケートでの項目順位付け
見た目の手がかりとして各項目に cursor:grab、ドラッグ中は grabbing を当てています。確定後の順序を保存したいときは、並び替え終わりに li の順番を読み取って配列にし、サーバーや localStorage に渡します。タッチ端末ではこのAPIが効きにくいため、スマホ対応が必須なら専用のタッチ処理や定評あるライブラリの併用を検討してください。
よくある質問
並び替えた結果を保存できますか？
できます。並び替えが終わった時点でリスト内のli要素を順に走査して値の配列を作り、localStorageやサーバーに送って保存します。次回読み込み時にその配列の順でリストを描き直せば、状態を復元できます。
スマホのタッチ操作でも動きますか？
標準のドラッグ&ドロップAPIはタッチ環境で動かないことが多いです。モバイル対応が必要な場合はtouchstartなどのタッチイベントを別途実装するか、タッチに対応した並び替えライブラリの利用を検討してください。