--- title: "並べ替え可能なリスト" description: "ドラッグ中に並べ替わるリスト、タブバー、グリッド——makeSortableList がドラフトを描画し、makeSortableItem が行を作り、ドロップで新しい順序が ref に書き込まれます。ハンドル、挿入ライン、入れ替えも。" canonical_url: "https://zizigy.github.io/vue-dnd-kit/ja/docs/guides/sortable-lists" --- > Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt) ## リストとその行 並べ替え可能なリストには 2 つのコンポーネントが必要です：リストと、その行です。 ```vue [LayersPanel.vue] ``` ```vue [LayerRow.vue] ``` 行は、それが描画されているリストに登録されます。1 つのコンポーネントで複数のリストを作ることもできます（2 つの列、リストの中のリスト）：各行は自分を含む要素のリストに加わり、リストの中のリストでは最も内側のリストに加わります。 ## ドラフト `makeSortableList` は `items` を返します。これは配列の**ドラフト**です。ドラッグ中、ドラフトはその場で並べ替わります：ドラッグ中の行が新しい枠に入り、ほかの行は道を空けるようにスライドします。配列自体はドロップまで変わりません。ドロップ時に、ライブラリが新しい順序を書き込みます。 上のレイヤーパネルは両方を示しています。パネルは `items` を描画していて、ドラッグ中に動きます。アートボードは配列そのものである `layers` を読み取っていて、離したときにだけ重なり順が変わります。 - 配列ではなく `items` を描画してください。配列を描画すると、ドロップまで何も動きません。 - 書き込みはリストの `onDrop` の後に行われます。`onDrop` の中では、配列はまだ古い順序で、`e.result` が新しい順序です。 - `layers` は普通の ref です（ここでは `defineModel` で、書き込みで `update:modelValue` が発行されます）。そのため、アプリの他の部分もほかの変更と同じようにこの変更を受け取ります。 ```ts makeSortableList(list, { items: layers, onDrop: (e) => { console.log(e.from.index, '→', e.to.index, e.result.get(e.to.list)); }, }); ``` ストア、サーバーの状態、イミュータブルなデータを使う場合は、ref の代わりにゲッターか `computed` を渡します。ライブラリは読み取り専用のソースには書き込みません。`e.preventDefault()` を呼び、`e.result` を自分で適用してください。[制御されたリスト](https://zizigy.github.io/docs/guides/shared-lists#controlled-lists)を参照。 ## キー 行はデータでキー付けされ、インデックスや自動生成の id は使いません。デフォルトのキーは `item.id` で、文字列や数値の場合はアイテムそのものです。 ```ts // LayersPanel.vue: your items have another key makeSortableList(list, { items: layers, getKey: (layer) => layer.uuid }); // LayerRow.vue: `item` is keyed with the list's getKey… makeSortableItem(el, { item: () => props.layer }); // …or pass the key yourself makeSortableItem(el, { id: () => props.layer.uuid }); ``` - `v-for` でも同じキーを使ってください：`:key="layer.uuid"`。`:key="index"` では違う行がアニメーションし、行の状態がほかの行へ移ってしまいます。 - キーは、アイテムをやり取りするすべてのリストの中で一意である必要があります。 - `item` と `id` はゲッターとして渡してください。props が変わっても行が同期した状態を保てます。 ## ハンドル デフォルトでは行全体でドラッグを開始できますが、行の中のボタン、入力欄、その他のコントロールは除きます。レイヤーの目とロックのアイコンは普通のボタンのままです。一部分だけでドラッグするには `handle` を渡します。 ```vue [LayerRow.vue] ``` - `handle` はアイテム内のセレクター、または要素の ref です。 - マウスのドラッグはハンドルからすぐに始まり、通常の 4 px を待ちません。動かさない押下はクリックのままです：ハンドルは `click` でメニューを開くこともできます。 - ハンドルにはドラッグの属性（`role`、`tabindex`、`aria-*`）が付き、キーボードドラッグもそこから始まります。 ハンドルは `aria-label` 付きの `