ドラッグ＆ドロップ並び替えリスト
項目をつかんで上下に入れ替えられる、ドラッグ＆ドロップ並び替えリストです。各 li に draggable="true" を付け、HTML5 のドラッグイベントを使います。 dragstart でつかんだ要素を覚え、半透明クラスを付与。
解説
項目をつかんで上下に入れ替えられる、ドラッグ＆ドロップ並び替えリストです。各 li に draggable="true" を付け、HTML5 のドラッグイベントを使います。dragstart でつかんだ要素を覚え、半透明クラスを付与。dragover では preventDefault でドロップを許可しつつ、重なった項目に枠線のハイライトを付け、最終的に並び順を差し替えます。専用ライブラリを使わず、標準 API だけで動くのが特徴です。
使いどころ
- タスクや TODO の優先順位を手で並べ替える UI
- お気に入りや表示順を自由に決めさせる設定画面
- カンバンやプレイリストの順序編集
つかめる手の形は CSS の cursor:grab と :active の grabbing で表現しています。ハイライト色は dsl__item--over の指定を変えるだけで調整できます。マウス前提のドラッグ操作はタッチやキーボードだけの利用者には届きにくいため、上下移動ボタンなどの代替手段を併設するとアクセシビリティが向上します。
よくある質問
スマートフォンのタッチ操作でも動きますか
この実装はマウスのドラッグイベントを使っているため、タッチ環境では動作が限定的です。スマホ対応を重視する場合は、上下移動ボタンを併設するかタッチ対応のライブラリの利用を検討してください。
並び替えた順番を保存できますか
この例は画面上の並び替えだけです。順番を保存したい場合は、並び替え後にリストの項目順を読み取り、サーバーや localStorage に書き込む処理を追加してください。