I need to add draggable divs, one for every image in an array of images, to a container.
The below works BUT only on the second drag. i.e. I have to drag the component twice for it to move. It obviously has something to do with the hooks used and how the divs are being created. Any help will be appreciated.
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
It looks like it is setting the dragId on first drag and then only on the second drag it actually drags and drops the div. How can I set this up so that it drags and drops on the first try?
I should have just used React to add the functions
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