DND Kit拖拽卡片至回收站未被检测问题排查与修复问询

1. 回收站未注册为拖拽目标：当前仅卡片列表区域使用SortableContext，回收站不在该拖拽上下文内，导致拖拽时无法被识别为有效目标。
2. 缺少回收站的拖拽接收配置：未给回收站添加Droppable组件及对应监听逻辑，无法捕获卡片拖拽到上方的事件。
3. 拖拽结束逻辑未区分场景：现有onDragEnd仅处理卡片排序，未判断是否拖拽到回收站目标。

1. 为回收站添加Droppable组件 #

导入Droppable并包裹回收站容器，配置唯一ID'trash'：

import { Droppable } from '@dnd-kit/core';

// ...其他代码
<div className="trash-container">
  <Droppable id="trash">
    <div className="trash">回收站</div>
  </Droppable>
</div>

2. 统一拖拽上下文范围 #

让卡片列表和回收站处于同一个DndContext下，确保拖拽事件能覆盖到回收站：

<DndContext
  sensors={sensors}
  collisionDetection={closestCenter}
  onDragEnd={handleDragEnd}
>
  <SortableContext items={items} strategy={verticalListSortingStrategy}>
    <div className="cards">
      {items.map((item) => (
        <Card key={item.id} id={item.id} title={item.title} />
      ))}
    </div>
  </SortableContext>
  <div className="trash-container">
    <Droppable id="trash">
      <div className="trash">回收站</div>
    </Droppable>
  </div>
</DndContext>

3. 修改onDragEnd逻辑处理删除场景 #

在拖拽结束时判断目标是否为回收站，若是则删除对应卡片：

const handleDragEnd = (event) => {
  const { active, over } = event;

  // 处理拖拽到回收站的删除逻辑
  if (over?.id === 'trash') {
    setItems(prev => prev.filter(item => item.id !== active.id));
    return;
  }

  // 原有卡片排序逻辑
  if (active.id !== over.id) {
    setItems((items) => {
      const oldIndex = items.findIndex((item) => item.id === active.id);
      const newIndex = items.findIndex((item) => item.id === over.id);
      return arrayMove(items, oldIndex, newIndex);
    });
  }
};

4. 可选：统一拖拽类型（避免类型不兼容） #

如果设置了拖拽类型，确保卡片Draggable的type与回收站Droppable的accept属性匹配：

// Card组件内的Draggable
<Draggable id={id} type="card">
  {/* 卡片内容 */}
</Draggable>

// 回收站的Droppable
<Droppable id="trash" accept="card">
  <div className="trash">回收站</div>
</Droppable>

完成以上修改后，拖拽卡片到回收站时over.id会显示'trash'，卡片也会被正常删除。

内容的提问来源于stack exchange，提问作者Www