` コンポーネントに `dragAndDropHooks` Props を渡します。`dragAndDropHooks` にわたすオブジェクトは、`useDragAndDrop` フックから取得した `dragAndDropHooks` です。`useDragAndDrop` フックの引数には、`getItems` と `onReorder` という 2 つのプロパティを持つオブジェクトを渡します。`getItems` は、ドラッグアンドドロップ操作によって移動されるデータを定義します。`onReorder` は、ドラッグアンドドロップ操作による並び替えが完了したときに呼び出される関数です。ここで実際にリストのデータの並び替えを行っています。
ドラッグ可能なグリッドの項目には必ずフォーカス可能なドラッグハンドルを提供する必要があります。ドラッグハンドルにより、キーボードやスクリーンリーダーを利用しているユーザーがドラッグアンドドロップ操作を開始できるようになります。ここでは `Button` コンポーネントに `slot="drag"` を指定することで、ドラッグハンドルとして機能するようになります。
以下のように、グリッドの項目をドラッグして並び替えることができることが確認できます。
キーボード操作ではドラッグハンドルにフォーカスがあるときに `Enter` キーを押すことでドラッグ操作を開始できます。また、`ArrowUp` キーと `ArrowDown` キーを押すことで項目の移動が可能です。ドラッグアンドドロップ操作中のスタイルは `.react-aria-DropIndicator` クラスを使用してカスタマイズできます。ドロップ対象の要素には `data-drop-target` 属性が追加されるため、この要素を対象にスタイルを適用することで、現在のドロップ位置を示すインジケータを表示できます。
```css
.react-aria-DropIndicator {
&[data-drop-target] {
outline: 1px solid lightblue;
}
}
```
ユーザーのポインタの下に表示されるドラッグのプレビューは、`useDragAndDrop` フックの `renderDragPreview` プロパティを使用してカスタマイズできます。
```tsx
const { dragAndDropHooks } = useDragAndDrop({
renderDragPreview: (items) => {
return (
{items[0]["text/plain"]}
{items.length > 1 && 他 {items.length - 1} 件}
);
},
});
```
### グリッド間のドラッグアンドドロップ
続いて複数のグリッド間でドラッグアンドドロップにより項目を移動する例を見てみましょう。タスクリストで `ToDo`、`In Progress`、`Done` の 3 つのグリッドを持つアプリケーションを想定しています。
```tsx:GridListMulti.tsx
import { useId } from "react";
import {
GridList,
GridListItem,
Button,
useDragAndDrop,
isTextDropItem,
} from "react-aria-components";
import { useListData } from "react-stately";
type Item = {
id: number;
name: string;
};
type GridListProps = {
initialItems: Item[];
title: string;
};
const MyGridList = ({ initialItems, title }: GridListProps) => {
const list = useListData({
initialItems,
});
const { dragAndDropHooks } = useDragAndDrop({
getItems(keys) {
return [...keys].map((key) => {
const item = list.getItem(key);
return {
"custom-app-type": JSON.stringify(item),
"text/plain": item.name,
};
});
},
// カスタム要素がドロップされるのを許可する
acceptedDragTypes: ["custom-app-type"],
// アイテムがコピーされるのではなく、常に移動されるようにする
getDropOperation: () => "move",
// 項目が他のリストからドロップされたときの処理
async onInsert(e) {
const processedItems = await Promise.all(
e.items
.filter(isTextDropItem)
.map(async (item) =>
JSON.parse(await item.getText("custom-app-type"))
)
);
if (e.target.dropPosition === "before") {
list.insertBefore(e.target.key, ...processedItems);
} else if (e.target.dropPosition === "after") {
list.insertAfter(e.target.key, ...processedItems);
}
},
// グリッドの項目が空のリストにドロップされたときの処理
async onRootDrop(e) {
const processedItems = await Promise.all(
e.items
.filter(isTextDropItem)
.map(async (item) =>
JSON.parse(await item.getText("custom-app-type"))
)
);
list.append(...processedItems);
},
// 同じリスト内での項目の移動
onReorder(e) {
if (e.target.dropPosition === "before") {
list.moveBefore(e.target.key, e.keys);
} else if (e.target.dropPosition === "after") {
list.moveAfter(e.target.key, e.keys);
}
},
// 他のリストに項目がドロップされたとき、元のリストから削除する
onDragEnd(e) {
if (e.dropOperation === "move" && !e.isInternal) {
list.remove(...e.keys);
}
},
});
const titleId = useId();
return (
{title}
{(item) => (
{item.name}
)}
);
};
export const MultiGridList = () => {
return (
);
};
```
## まとめ
- ドラッグアンドドロップはユーザーが UI の要素をドラッグして別の場所に移動する操作であり、多くの場面で利用されているが、キーボードやスクリーンリーダーを利用するユーザーに対しては機能を利用することが難しかった
- React Aria はアクセシビリティを最優先した設計となっており、ドラッグアンドドロップ機能においてもキーボードやスクリーンリーダーを利用するユーザーに対してサポートすることを目指している
- `useDrag` と `useDrop` フックを使用することで、ドラッグ可能な要素とドロップゾーンを作成することができる
- ``, ``, `` などのデータのコレクションコンポーネンできる<できる<できる<トにおいてもドラッグアンドドロップ機能が提供されている
- `` コンポーネントを使用してドラッグアンドドロップによる並び替えやグリッド間のドラッグアンドドロップを実装することができる
## 参考
- [Drag and Drop – React Aria](https://react-spectrum.adobe.com/react-aria/dnd.html)
- [Taming the dragon: Accessible drag and drop – React Spectrum Blog](https://react-spectrum.adobe.com/blog/drag-and-drop.html)