React搜索结果拖拽故障：无法拖拽Chips组件搜索结果

问题根源 #

你当前代码把Draggable组件包裹了包含搜索框、按钮以及所有搜索结果的整个容器，导致只有这个大容器具备拖拽能力，而单个搜索结果项并没有绑定拖拽属性，所以无法拖拽搜索结果。

修复步骤 #

1. 移除外层包裹整个列项的Draggable，将Draggable移到搜索结果的循环内部，为每个结果项单独设置拖拽能力
2. 为每个搜索结果分配唯一的draggableId（比如使用item.id）
3. 确保拖拽相关的props（provided.draggableProps、provided.dragHandleProps、provided.innerRef）正确绑定到每个搜索结果的容器上

修改后的代码片段 #

{panelOpen && (
  <div className="vertical-panel">
    <button onClick={() => setPanelOpen(false)}>close</button>
    {columns.column3.items.map((item, index) => (
      <div key={item}>
        <p>{item}</p>
        <MuiChipsInput
          value={chips}
          onChange={handleChange}
        />
        <button onClick={handleSearch}>Search</button>

        {filteredData.length > 0 ? (
          filteredData.map((resultItem, resultIndex) => (
            <Draggable 
              key={resultItem.id} 
              draggableId={`result-${resultItem.id}`} 
              index={resultIndex}
            >
              {(provided) => (
                <div
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                  ref={provided.innerRef}
                >
                  {resultItem.lion}
                </div>
              )}
            </Draggable>
          ))
        ) : (
          <div>No results found.</div>
        )}
      </div>
    ))}
  </div>
)}

关键改动说明 #

• 把Draggable从外层移到filteredData.map循环内，让每个搜索结果项成为独立的可拖拽单元
• 用resultItem.id生成唯一的draggableId，避免拖拽时出现ID冲突
• 将拖拽相关属性绑定到单个搜索结果的容器div上，确保每个结果都能触发拖拽事件

如果之后需要将拖拽结果放入表格列，还需在表格目标列位置添加Droppable组件，并实现拖拽结束后的逻辑（比如更新表格数据）。

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