ドラッグ＆ドロップ並び替えリスト
このドラッグ＆ドロップ並び替えリストは、項目をつまんで上下に動かし順序を入れ替える操作 UI です。各 li に draggable="true" を付け、HTML 標準のドラッグイベント（ dragstart / dragover / dragend ）で動作します。
解説
このドラッグ＆ドロップ並び替えリストは、項目をつまんで上下に動かし順序を入れ替える操作 UI です。各 li に draggable="true" を付け、HTML 標準のドラッグイベント（dragstart / dragover / dragend）で動作します。dragstart で掴んだ要素を覚え、dragover では preventDefault でドロップを許可しつつ、重なった相手の前後どちらに差し込むかを判定して並べ替えます。掴んでいる間は is-dragging で半透明にし、ハンドル記号で「動かせる」ことを示します。
使う場面
- ToDo やタスクの優先順位の並び替え
- 表示項目・お気に入りの順序のカスタマイズ
- プレイリストやギャラリーの並べ替え
項目は li を増減するだけで増やせます。掴んだ時の見た目は is-dragging の opacity で調整できます。注意点として、HTML5 のドラッグ API はタッチ操作（スマホ）に標準対応していないため、モバイルも完全に対応させたい場合はポインターイベントでの自作か専用ライブラリの併用を検討してください。並び替えた結果を保存するには、dragend 時に現在の順序を配列で取り出してサーバーや localStorage に保存します。
よくある質問
スマホでドラッグできないのですが対応できますか？
HTML5の標準ドラッグ機能はタッチ操作に対応していないため、スマホでは動きにくいことがあります。モバイルも完全対応させたい場合は、ポインターイベントで自作するか、タッチ対応の並び替えライブラリを併用してください。
並び替えた順番を保存したいです。
並び替えが終わったタイミングでリスト内の項目を順番に読み取り、配列として取り出します。その配列をlocalStorageに保存したりサーバーへ送ったりすれば、次回も同じ順序を復元できます。