【dnd-kit】リスト末尾にドロップで要素を追加する

dnd-kitでドラッグ＆ドロップでリストにアイテムを並び替えるだけでなく、リストの末尾にドラッグしたら新しくアイテムを追加したい

基本方針

1. リストの末尾に useDroppable な要素を置いてドロップ可能にする
2. ドロップ判定時に「sortableリスト上なのか、droppableアイテム上なのか」を区別する
3. onDragEnd で末尾への追加処理を行う

---

実装例

1. リストの末尾に useDroppable を設定

const { setNodeRef } = useDroppable({ id: 'new' });

return (
  <div className="list-container">
    {items.map(id => (
      <SortableItem key={id} id={id} />
    ))}
    <div ref={setNodeRef} >
      ここにドロップして追加
    </div>
  </div>
);

2. onDragEnd で末尾追加を判定

  const { active, over } = event;
  if (!over) return;

  if (over.id === 'new') {
    // リスト自体にドロップされた場合 → 末尾に追加
    setItems((prev) => [...prev, active.id]);
  } else {
    // 通常の並び替え処理
    reorderItems(active.id, over.id);
  }
};