ドラッグ＆ドロップ並び替えリスト
このリストは、項目をマウスでつかんで並べ替えできるドラッグ＆ドロップ式の並び替えリストです。各 li に draggable="true" を付け、HTML5 のドラッグイベントである dragstart 、 dragover 、 dragend を使って実装しています。
解説
このリストは、項目をマウスでつかんで並べ替えできるドラッグ＆ドロップ式の並び替えリストです。各 li に draggable="true" を付け、HTML5 のドラッグイベントである dragstart、dragover、dragend を使って実装しています。つかんだ項目は dl__item--dragging クラスで半透明になり、ドロップ先の候補には dl__item--over で点線の枠が付くため、どこに入るかが視覚的にわかります。左端の取っ手アイコンが操作の起点を示します。
使う場面
- タスクや TODO の優先順位をユーザー自身に並べ替えさせたいとき
- 画像やセクションの表示順を編集画面で入れ替えるとき
- お気に入りやブックマークの順序をカスタマイズさせたいとき
見た目は CSS の .dl__item 周りで調整でき、つかんでいる間のカーソルは cursor:grab と :active の grabbing で切り替わります。注意点として、ネイティブのドラッグイベントはスマホのタッチ操作では動作が不安定なため、タッチ対応が必要なら専用ライブラリの併用を検討します。キーボードだけで並べ替えできない点にも留意し、重要な操作では上下移動ボタンの併設も検討します。
よくある質問
スマホのタッチ操作でも並べ替えできますか
HTML5 のネイティブなドラッグイベントはタッチ環境での挙動が不安定で、端末によっては動きません。スマホ対応が必須なら、ポインターイベントに対応した専用の並べ替えライブラリを使うのが確実です。
並べ替えた結果を保存するにはどうしますか
このコードは見た目の入れ替えまでを担当します。確定した順序を保存したい場合は、dragend のタイミングでリスト内の項目を順に読み取り、その配列をサーバーへ送るか localStorage に保存する処理を追加してください。