我可以轻松地进行react-dnd拖动,让单个元素可以拖动,但是我有4个字段的数组,我想使其可拖动。在下面的示例代码中,它通过映射数组创建四个框,每个框都有一个“element”的类名。这应该使它们都可以拖动,但它们不会移动。
这是我的拖动代码:
const ELEMENT = 'element';
const [{ isDragging }, drag, dragPreview] = useDrag(() => ({
type: ELEMENT,
collect: (monitor) => ({
isDragging: monitor.isDragging()
})
}))
Run Code Online (Sandbox Code Playgroud)
这是我的可拖动元素:
{FieldDetail.map((e,i) =>
<div key={i} ref={dragPreview} style={{ opacity: isDragging ? 0.5 : 1}}>
<div className='element' ref={drag}></div>
</div>
)}
Run Code Online (Sandbox Code Playgroud)
有任何想法吗?我需要在类型或类名中做更多的事情吗?