【React】Dnd-Kit でドラッグ＆ドロップを実装する

React Dnd-Kit というライブラリを知ったので調べた

dndkit.com

Dnd-Kit はReactでドラッグ＆ドロップ機能を実装するためライブラリ

特徴は以下

• 最小限の依存関係で動作するように設計されていて、軽量、高パフォーマンス
• フックベースのAPI
• カスタマイズするための多くのオプションを提供されている
• キーボード操作をサポートしていて、アクセシビリティを考慮したインターフェースの構築が簡単にできる
• センサーシステムというのを使用していて、マウス、タッチ、キーボードなど、さまざまな入力方法に対応することができる

簡単なドラッグ＆ドロップの実装例

import { DndContext, MouseSensor, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";

function DraggableItem({ id }) {
  const { attributes, listeners, setNodeRef } = useDraggable({ id });

  return (
    <div
      ref={setNodeRef}
      {...listeners}
      {...attributes}
      style={{ padding: "8px", border: "1px solid black", margin: "4px" }}
    >
      {id}
    </div>
  );
}

function DroppableArea() {
  const { setNodeRef } = useDroppable({ id: "droppable" });

  return (
    <div ref={setNodeRef} style={{ width: "300px", height: "300px", border: "2px dashed gray", margin: "16px" }}>
      Drop here
    </div>
  );
}

const onDragEnd = ({ active, over }) => {
　　if (over) {
  console.log(`Dropped ${active.id} into ${over.id}`);
　　} else {
  console.log(`Dropped ${active.id} outside any droppable area`);
 }
};

<DndContext onDragEnd={onDragEnd} sensors={sensors}>
  <DroppableArea />
  <DraggableItem id="item-1" />
  <DraggableItem id="item-2" />
</DndContext>

DndContextはすべてのDnDインタラクションを管理するコンテナコンポーネント

onDragStart, onDragEnd, onDragMove などのイベントハンドラを提供する

sensorsはドドラッグ＆ドロップのインタラクションをカスタマイズするためプロパティ

細かい制御ができる

DnD Kitのセンサー

Dnd-Kitのセンサーは、ユーザーがアイテムをドラッグする際にどのように操作するかを制御する

例えば、ユーザーの入力イベント（例えば、マウスクリック、タッチ、キーボード操作など）を監視し、それに応じてドラッグ操作を開始する役割を果たす

主なプリセットセンサー

• MouseSensor: マウス入力に基づくセンサー。ユーザーがアイテムをクリックしてドラッグを開始する際に使用される
• TouchSensor: タッチデバイス向けのセンサー。ユーザーが画面に触れてドラッグ操作を行う場合に適している
• KeyboardSensor: キーボード操作に基づくセンサー。キーボードでフォーカスされたアイテムを移動させる場合に使用する
• PointerSensor: マウスやタッチ入力の両方を扱うセンサー。クロスデバイスの対応を考える場合に使用する

独自のセンサーを作成することも可能