アクセシビリティが考慮された React Aria のドラッグアンドドロップ

import { useDrag } from "react-aria";
 
export const Draggable = () => {
  const { isDragging, dragProps } = useDrag({
    getItems: () => [{ "text/plain": "Hello, world!" }],
  });
 
  return (
    <button {...dragProps} type="button">
      className={isDragging ? "dragging" : ""}
      {isDragging ? "Dragging" : "Drag me"}
    </button>
  );
};

import { useDrop } from "react-aria";
import { useState, useRef } from "react";
 
export const DropTarget = () => {
  const [dropped, setDropped] = useState<string | null>(null);
  const ref = useRef<HTMLButtonElement | null>(null);
  const { dropProps, isDropTarget } = useDrop({
    ref,
    async onDrop(e) {
      const items = await Promise.all(
        e.items
          .filter((item) => item.kind === "text")
          .map((item) => item.getText("text/plain"))
      );
      setDropped(items.join("\n"));
    },
  });
 
  return (
    <button
      {...dropProps}
      type="button"
      ref={ref}
      className={`drop-zone ${
        isDropTarget ? "target" : dropped ? "dropped" : ""
      }`}
    >
      {dropped || "Drop here"}
    </button>
  );
};

<DropZone onDrop={(e) => {
  const items = await Promise.all(
    e.items
      .filter((item) => item.kind === "text")
      .map((item) => item.getText("text/plain"))
  );
  setDropped(items.join("\n"));
}}>
  Drop here
</DropZone>

import {
  GridList,
  GridListItem,
  Button,
  useDragAndDrop,
} from "react-aria-components";
 
import { useListData } from "react-stately";
 
export const MyGridList = () => {
  const list = useListData({
    initialItems: [
      { id: 1, name: "Charizard" },
      { id: 2, name: "Blastoise" },
      { id: 3, name: "Venusaur" },
      { id: 4, name: "Pikachu" },
      { id: 5, name: "Adobe Connect" },
    ],
  });
 
  const { dragAndDropHooks } = useDragAndDrop({
    getItems: (keys) =>
      [...keys].map((key) => ({ "text/plain": list.getItem(key).name })),
    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);
      }
    },
  });
  return (
    <GridList
      aria-label="Favorite pokemon"
      items={list.items}
      dragAndDropHooks={dragAndDropHooks}
    >
      {(item) => (
        <GridListItem textValue={item.name}>
          <Button slot="drag" className="drag">
            ☰
          </Button>
          {item.name}
        </GridListItem>
      )}
    </GridList>
  );
};

.react-aria-DropIndicator {
  &[data-drop-target] {
    outline: 1px solid lightblue;
  }
}

const { dragAndDropHooks } = useDragAndDrop({
  renderDragPreview: (items) => {
    return (
      <div className="drag-preview">
        {items[0]["text/plain"]}
        {items.length > 1 && <span> 他 {items.length - 1} 件</span>}
      </div>
    );
  },
});

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 (
    <div>
      <h2 id={titleId}>{title}</h2>
      <GridList
        aria-labelledby={titleId}
        selectionMode="multiple"
        items={list.items}
        dragAndDropHooks={dragAndDropHooks}
        className="grid-list"
      >
        {(item) => (
          <GridListItem textValue={item.name}>
            <Button slot="drag" className="drag">
              ☰
            </Button>
            {item.name}
          </GridListItem>
        )}
      </GridList>
    </div>
  );
};
 
export const MultiGridList = () => {
  return (
    <div className="multi-grid-list">
      <div>
        <MyGridList
          title="Todo"
          initialItems={[
            {
              id: 1,
              name: "buy milk",
            },
            {
              id: 2,
              name: "learn react",
            },
            {
              id: 3,
              name: "learn react-dnd",
            },
          ]}
        />
      </div>
      <div>
        <MyGridList
          title="In Progress"
          initialItems={[
            {
              id: 4,
              name: "learn opentelemetry",
            },
          ]}
        />
      </div>
      <div>
        <MyGridList title="Done" initialItems={[]} />
      </div>
    </div>
  );
};