如何用javascript和react钩子创建可拖动组件?

Question

我需要在一个容器中添加可拖动div，每个div对应一个数组中的图像。

下面的操作只适用于第二次拖动。例如，我必须拖动组件两次才能移动它。这显然与使用的钩子和如何创建潜水器有关。如有任何帮助，不胜感激。

代码沙箱

const App = ({images}) => {
const [selectedImages, setSelectedImages] = useState(images)
const [dragId, setDragId] = useState()
const handleDrag = (ev) => {
setDragId(ev.currentTarget.id)
}
const handleDrop = (ev) => {
const sortedImages = sortImages(selectedImages, dragId)
setSelectedImages(sortedImages)
}
return (
<Container
images={selectedImages}
handleDrag={handleDrag}
handleDrop={handleDrop}
/>
)
}
export default App
const Container = ({ images, handleDrag, handleDrop }) => {
const ref = useRef(null)
useEffect(() => {
if (containerRef.current) {
for (let i = 0; i < images.length; ++i) {
const draggable = document.createElement('div')
draggable.ondragstart = handleDrag
draggable.ondrop = handleDrop
const style = 'position: absolute; ...'
draggable.setAttribute('style', style)
draggable.setAttribute('draggable', true)
draggable.setAttribute('id', images[i].id)
ref.current.appendChild(draggable)
}
}
}, [images, ref, handleDrag, handleDrop])

return (
<div className={'relative'}>
<div ref={ref} />
</div>
)
}
export default Container

它看起来像是在第一次拖动时设置dragId，然后只有在第二次拖动时，它才实际拖放div。我如何设置这个，以便它在第一次尝试时拖放?

Answer 1

我应该使用React来添加函数

const Container = ({ images, handleDrag, handleDrop }) => {
const containerRef = useRef(null)

return (
<div ref={containerRef}>
{images.map((image) => (
<div
key={image.id}
id={image.id}
draggable
onDragOver={(ev) => ev.preventDefault()}
onDrop={handleDrop}
onDragStart={handleDrag}
style={{
position: 'absolute'...`,
}}
/>
))}
</div>
)
}
export default Container

沙箱