dnd kit を使って実装したドラッグ&ドロップ可能なアイテムの中に削除ボタンを追加する

import { ReactElement, useCallback, useState } from "react";

import { DndContext } from "@dnd-kit/core";
import { arrayMove, SortableContext, useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

const items = ["1", "2", "3", "4", "5", "6", "7", "8"];
const contents = items.map((item) => ({
  id: item,
  content: item,
}));

interface SortableItemProps {
  id: string;
  children: ReactElement;
}

function SortableItem({ id, children }: SortableItemProps) {
  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({ id });
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    // スタイル調整用
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    margin: 4,
    borderRadius: 4,
    width: "150px",
    height: "150px",
    border: "1px solid black",
    backgroundColor: "white",
  };
  return (
    // eslint-disable-next-line react/jsx-props-no-spreading
    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
      {children}
    </div>
  );
}

function DndSample(): JSX.Element {
  const [state, setState] =
    useState<{ id: string; content: string }[]>(contents);
  const handleDragEnd = useCallback(
    (event) => {
      const { active, over } = event;
      if (over === null) {
        return;
      }
      if (active.id !== over.id) {
        const oldIndex = state
          .map((item) => {
            return item.id;
          })
          .indexOf(active.id);
        const newIndex = state
          .map((item) => {
            return item.id;
          })
          .indexOf(over.id);
        const newState = arrayMove(state, oldIndex, newIndex);
        setState(newState);
      }
    },
    [state]
  );

  return (
    <DndContext onDragEnd={handleDragEnd}>
      <SortableContext items={state}>
        <div style={{ display: "flex", flexWrap: "wrap" }}>{/* スタイル調整用 */}
          {state.map((item) => (
            <SortableItem key={item.id} id={item.id}>
              <div>
                {item.content}
              </div>
            </SortableItem>
          ))}
        </div>
      </SortableContext>
    </DndContext>
  );
}

function DndSample(): JSX.Element {

  ...

  const handleClick = (index: string) => {
    // item.id と渡ってきた index が合致している時にアイテムを削除する
    setState(state.filter((item) => item.id !== index));
  };

  return (
    <DndContext onDragEnd={handleDragEnd}>
      <SortableContext items={state}>
        <div style={{ display: "flex", flexWrap: "wrap" }}>
          {state.map((item) => (
            <SortableItem key={item.id} id={item.id}>
              <div>
                {/* 削除ボタンを追加 */}
                <button
                  type="button"
                  onClick={() => {
                    handleClick(item.id);
                  }}
                >
                  Remove Item
                </button>
                {item.content}
              </div>
            </SortableItem>
          ))}
        </div>
      </SortableContext>
    </DndContext>
  );
}

function SortableItem({ id, children }: SortableItemProps) {
  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({ id });

  ...

  return (
    <div ref={setNodeRef} style={style}>
      {/* 親の div ではなく button を追加して attributes と listeners を渡す */}
      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
      <button type="button" {...attributes} {...listeners}>
        Drag Handle
      </button>
      {children}
    </div>
  );
}

import { ReactElement, useCallback, useState } from "react";
import type { MouseEvent, KeyboardEvent } from "react";

import {
  DndContext,
  MouseSensor as LibMouseSensor,
  KeyboardSensor as LibKeyboardSensor,
  useSensor,
  useSensors,
} from "@dnd-kit/core";
import { arrayMove, SortableContext, useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

// data-dndkit-disabled-dnd-flag="true" が指定されている要素はドラッグ無効にする
function shouldHandleEvent(element: HTMLElement | null) {
  let cur = element;

  while (cur) {
    if (cur.dataset && cur.dataset.dndkitDisabledDndFlag) {
      return false;
    }
    cur = cur.parentElement;
  }

  return true;
}

// LibMouseSensor を override してドラッグ無効にする
class MouseSensor extends LibMouseSensor {
  static activators = [
    {
      eventName: "onMouseDown" as const,
      handler: ({ nativeEvent: event }: MouseEvent): boolean => {
        return shouldHandleEvent(event.target as HTMLElement);
      },
    },
  ];
}

// LibKeyboardSensor を override してドラッグ無効にする
class KeyboardSensor extends LibKeyboardSensor {
  static activators = [
    {
      eventName: "onKeyDown" as const,
      handler: ({ nativeEvent: event }: KeyboardEvent<Element>): boolean => {
        return shouldHandleEvent(event.target as HTMLElement);
      },
    },
  ];
}

...

function DndSample(): JSX.Element {

  ...

  // useSensor と useSensors を使って上書きした Sensor を DndContext に紐付ける
  const mouseSensor = useSensor(MouseSensor);
  const keyboardSensor = useSensor(KeyboardSensor);
  const sensors = useSensors(mouseSensor, keyboardSensor);

  return (
    {/* useSensors でまとめた sensors を DndContext に渡す */}
    <DndContext onDragEnd={handleDragEnd} sensors={sensors}>
      <SortableContext items={state}>
        <div style={{ display: "flex", flexWrap: "wrap" }}>{/* スタイル調整用 */}
          {state.map((item) => (
            <SortableItem key={item.id} id={item.id}>
              <div>
                <button
                  type="button"
                  onClick={() => {
                    handleClick(item.id);
                  }}
                  data-dndkit-disabled-dnd-flag="true"
                >
                  Remove Item
                </button>
                {item.content}
              </div>
            </SortableItem>
          ))}
        </div>
      </SortableContext>
    </DndContext>
  );
}