Reactでdnd-kitを使い、ドラッグで並べ替える一覧を作る方法

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

export type Fruit = { id: string; label: string };

export const initialFruits: Fruit[] = [
  { id: 'apple', label: 'りんご' },
  { id: 'orange', label: 'みかん' },
  { id: 'grape', label: 'ぶどう' },
  { id: 'peach', label: 'もも' },
  { id: 'pear', label: 'なし' },
];

import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import type { Fruit } from './items';

// 行全体をつかんで動かせる1行
export function SortableItem({ fruit }: { fruit: Fruit }) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
    useSortable({ id: fruit.id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.6 : 1,
  };

  return (
    <li ref={setNodeRef} style={style} className="row" {...attributes} {...listeners}>
      {fruit.label}
    </li>
  );
}

role="button" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-0"

import { useState } from 'react';
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  type DragEndEvent,
} from '@dnd-kit/core';
import {
  SortableContext,
  arrayMove,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { initialFruits } from './items';
import { SortableItem } from './SortableItem';

// ドラッグで並べ替えられる縦の一覧
export function SortableList() {
  const [fruits, setFruits] = useState(initialFruits);

  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
  );

  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;
    if (over && active.id !== over.id) {
      setFruits((prev) => {
        const oldIndex = prev.findIndex((f) => f.id === active.id);
        const newIndex = prev.findIndex((f) => f.id === over.id);
        return arrayMove(prev, oldIndex, newIndex);
      });
    }
  }

  return (
    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
      <SortableContext items={fruits} strategy={verticalListSortingStrategy}>
        <ul className="list">
          {fruits.map((fruit) => (
            <SortableItem key={fruit.id} fruit={fruit} />
          ))}
        </ul>
      </SortableContext>
    </DndContext>
  );
}

前: りんご / みかん / ぶどう / もも / なし
後: みかん / ぶどう / りんご / もも / なし

後: みかん / ぶどう / りんご / もも / なし

aria-live に入った文: [
 "Draggable item apple was moved over droppable area apple.",
 "Draggable item apple was moved over droppable area orange.",
 "Draggable item apple was moved over droppable area grape.",
 "Draggable item apple was dropped over droppable area grape"
]

import type { Announcements, ScreenReaderInstructions } from '@dnd-kit/core';
import { initialFruits } from './items';

// id から表示名を引く（読み上げに id の 'apple' ではなく「りんご」を使うため）
const labelOf = (id: string | number) => initialFruits.find((f) => f.id === id)?.label ?? String(id);

export const screenReaderInstructions: ScreenReaderInstructions = {
  draggable:
    'スペースキーで持ち上げます。上下の矢印キーで動かし、もう一度スペースキーで置きます。Escape キーで取り消します。',
};

export const announcements: Announcements = {
  onDragStart({ active }) {
    return `${labelOf(active.id)}を持ち上げました。`;
  },
  onDragOver({ active, over }) {
    return over ? `${labelOf(active.id)}は、${labelOf(over.id)}の位置にあります。` : undefined;
  },
  onDragEnd({ active, over }) {
    return over ? `${labelOf(active.id)}を、${labelOf(over.id)}の位置に置きました。` : undefined;
  },
  onDragCancel({ active }) {
    return `${labelOf(active.id)}の移動を取り消しました。`;
  },
};

<DndContext
  sensors={sensors}
  collisionDetection={closestCenter}
  onDragEnd={handleDragEnd}
  accessibility={{ announcements, screenReaderInstructions }}
>

aria-live に入った文: [
 "りんごは、りんごの位置にあります。",
 "りんごは、みかんの位置にあります。",
 "りんごは、ぶどうの位置にあります。",
 "りんごを、ぶどうの位置に置きました。"
]

<li ref={setNodeRef} style={style} className="row" {...attributes} {...listeners}>
  <span>{fruit.label}</span>
  <button type="button" onClick={() => onDelete(fruit.id)}>
    削除
  </button>
</li>

後: りんご / みかん / ぶどう / もも / なし  onDragEnd の回数: 1

useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),

後: りんご / ぶどう / もも / なし  onDragEnd の回数: 0

function HandleRow({ fruit, onDelete }: { fruit: Fruit; onDelete: (id: string) => void }) {
  const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition } =
    useSortable({ id: fruit.id });
  const style = { transform: CSS.Transform.toString(transform), transition };

  return (
    <li ref={setNodeRef} style={style} className="row">
      <button type="button" className="handle" ref={setActivatorNodeRef} {...attributes} {...listeners} aria-label={`${fruit.label}を動かす`}>
        ⠿
      </button>
      <span>{fruit.label}</span>
      <button type="button" onClick={() => onDelete(fruit.id)}>
        削除
      </button>
    </li>
  );
}