やってみよう行の右端の「≡」をつかんで、上下に動かしてみてください
ジェスチャーメジャー（よく見る）
ドラッグ＆ドロップ（並べ替え）
Drag and Drop / Reorderable List
行の「≡」をつかんで持ち上げ、好きな位置に動かして順番を入れ替える。
別名ドラッグアンドドロップ並べ替えリオーダーソータブルリストD&D
どこで使われている？
- よく見かける場所
- やることリスト、プレイリスト、ホーム画面のアイコン、管理画面の並べ替え
- 使うとよい場面
- ユーザーが自分で好きな順番に並べ替えたいとき
- 避けたい場面
- 並べ替えが必要ない一覧、スマホでスクロールもする長い一覧（操作がぶつかりやすい）
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「ドラッグ＆ドロップ（並べ替え）（Drag and Drop / Reorderable List）」を実装してください。 動き：リストの各行の右端に「≡」のつまみを置き、つまみをドラッグすると行が少し浮き上がって影が付き、指に合わせて上下に動く。他の行は空いた場所へずれていき、離した位置に行が収まる。 使う部品：Drag and Drop（SortableJS や dnd-kit などのライブラリ）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | Drag and Drop（SortableJS や dnd-kit などのライブラリ） |
|---|---|
| iPhoneアプリなら | List + ForEach の .onMove |
| Androidアプリなら | 標準部品なし。LazyColumn + ドラッグ処理を自作 or ライブラリ |
| Flutterなら | ReorderableListView |
| React Nativeなら | react-native-draggable-flatlist |