ドラッグ＆ドロップ 並び替えリスト
このスニペットは、リスト項目をマウスでつかんで上下に並び替えできる UI を、ブラウザ標準の HTML5 Drag and Drop API で実装したものです。各 li に draggable="true" を付け、 dragstart でつかんだ要素を覚え、 dragover で重なった項目に枠線を出し、 dr…
解説
このスニペットは、リスト項目をマウスでつかんで上下に並び替えできる UI を、ブラウザ標準の HTML5 Drag and Drop API で実装したものです。各 li に draggable="true" を付け、dragstart でつかんだ要素を覚え、dragover で重なった項目に枠線を出し、drop で after() または before() を使って実際の DOM 位置を入れ替えます。ドラッグ中の項目は is-dragging クラスで半透明になり、ドロップ先候補は is-over で青く縁取られるため、操作の状態が一目で分かります。
向いている場面
- やることリストやお気に入りの優先順位を手で並べ替える画面
- 表示項目の順番を利用者に決めてもらう設定パネル
- カンバン風のカード並び替えの土台
色やつかんだ感触は CSS 側で変えられます。マウスカーソルは cursor:grab と :active 時の grabbing で握る動きを表現しています。注意点として、HTML5 Drag and Drop はスマホのタッチ操作では動かないため、モバイル対応が必要ならポインタイベントを使った実装に切り替えるか、touch 用の処理を追加してください。並び替えた結果を保存したい場合は、drop 後に順序を配列で取り出してサーバーや localStorage に送る処理を足します。
よくある質問
スマートフォンのタッチでも並び替えできますか
標準の HTML5 Drag and Drop API はタッチ環境では発火しないため、このままではスマホで動きません。モバイル対応にはポインタイベントや touch イベントを使った別実装が必要です。
並び替えた順番を保存するには
drop イベントの後にリスト内の項目を配列として取り出し、その順序を localStorage やサーバーへ送れば保存できます。ページを再読み込みしたときに同じ順で描き直す処理を加えてください。