【React】任意の要素のドラッグ&ドロップ時にオブジェクト等の自由なデータの受け渡しもする方法

import { DragEvent, DragEventHandler, useCallback } from 'react';
import { atom, useAtom } from 'jotai';

// 最後にドラッグしたデータを保持する atom
const lastDraggedItemAtom = atom<unknown>(null);

/** ドラッグ&ドロップのイベントハンドラーを返すフック */
export const useDragAndDrop = <T = unknown>(): {
  makeHandleDragStart: (
    passItem: T,
    callback?: (passItem: T, event: DragEvent<HTMLElement>) => void
  ) => DragEventHandler<HTMLElement>;
  makeHandleDrop: (callback?: (passItem: T, event: DragEvent<HTMLElement>) => void) => DragEventHandler<HTMLElement>;
} => {
  // ドラッグ時に渡されるアイテムを保持する atom のセッター、ゲッター。 useState 的に使えます。
  const [lastDraggedItem, setLastDraggedItem] = useAtom(lastDraggedItemAtom);

  /** ドラッグ開始イベントハンドラー関数を返す関数 */
  const makeHandleDragStart = useCallback(
    (passItem: T, callback?: (passItem: T, event: DragEvent<HTMLElement>) => void): DragEventHandler<HTMLElement> =>
      (event) => {
        // ハンドラー生成時に渡された値をセットする
        setLastDraggedItem(passItem);
        // 通常の onDragStart と似た形のコールバックを呼び出し側で定義でき、それを使う様にしておく
        callback && callback(passItem, event);
      },
    [setLastDraggedItem]
  );

  /** ドロップイベントハンドラー関数を返す関数 */
  const makeHandleDrop = useCallback(
    (callback?: (passItem: T, event: DragEvent<HTMLElement>) => void): DragEventHandler<HTMLElement> =>
      (event) => {
        // 通常の onDrop と似た形のコールバックを呼び出し側で定義でき、それを使う様にしておく
        // このコールバックに最後にドラッグされた時にセットされた値を渡すことで任意のデータ受け渡しを実現する
        callback && callback(lastDraggedItem as T, event);
      },
    [lastDraggedItem]
  );

  return { makeHandleDragStart, makeHandleDrop };
};

import React from "react";
import "./styles.css";

import { useDragAndDrop } from "./useDragAndDrop";

type Company = {
  name: string;
};
/** ドラッグ可能要素。props で渡された会社名をドロップ先に渡せるようなドラッグイベントを起こす */
const DraggableItem: React.FC<{ name: string }> = ({ name }) => {
  const { makeHandleDragStart } = useDragAndDrop<Company>();
  return (
    <div
      className="drag-item"
      draggable
      onDragStart={makeHandleDragStart({ name })}
    >
      ドラッグできます。{JSON.stringify({ name })}
    </div>
  );
};

/** ドロップ可能要素。ドラッグ時にセットされた会社名を読み取って表示する */
const DropArea: React.FC = () => {
  const [passedItem, setPassedItem] = React.useState<Company | null>(null);
  const { makeHandleDrop } = useDragAndDrop<Company>();
  const handleDrop = makeHandleDrop((item) => {
    setPassedItem(item);
  });
  return (
    <div
      className="drop-area"
      onDrop={handleDrop}
      onDragOver={(e) => e.preventDefault()}
    >
      ドロップできます。{JSON.stringify(passedItem)}
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>atomを使ったドラッグ&ドロップ例</h1>
      <DraggableItem name="シーポイント" />
      <DraggableItem name="ラボ" />
      <DropArea />
      <DropArea />
    </div>
  );
}