Necesito agregar divs arrastrables, uno para cada imagen en una matriz de imágenes, a un contenedor.
Lo siguiente funciona PERO solo en el segundo arrastre. es decir, tengo que arrastrar el componente dos veces para que se mueva. Obviamente tiene algo que ver con los ganchos utilizados y cómo se crean los divs. Cualquier ayuda será apreciada.
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 ContainerParece que está configurando dragId en el primer arrastre y luego solo en el segundo arrastre, en realidad arrastra y suelta el div. ¿Cómo puedo configurar esto para que se arrastre y suelte en el primer intento?
Debería haber usado React para agregar las funciones.
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