React-dnd 多个元素 - 编程之家

如何解决React-dnd 多个元素

我可以轻松地将 react-dnd 拖拽到单个元素上，但是我有 4 个字段的数组，我想让它变成可拖拽的。在我下面的示例代码中，它通过映射数组创建了四个框，每个框的 className 为“元素”。这应该使它们都可以拖动但它们不会移动。

这是我的拖动代码：

 const ELEMENT = 'element';
    const [{ isDragging },drag,dragPreview] = useDrag(() => ({
      type: ELEMENT,collect: (monitor) => ({
        isDragging: monitor.isDragging()
      })
    }))

这是我的可拖动元素：

 {FieldDetail.map((e,i) =>  
   <div key={i} ref={dragPreview} style={{ opacity: isDragging ? 0.5 : 1}}>
        <div className='element' ref={drag}></div>            
    </div>          
  )}

有什么想法吗？我需要在 type 或 className 中做更多的事情吗？