How to create draggable components with javascript and react hooks?

Question

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.

Code sandbox

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?

Armipotent

please provide the sandbox code with url. Then easy to work with the problem that you mentioning – Path

I added sandbox example – Armipotent

I wonder why you use this native js append logic in the useEffect Hook? Why don't you generate the markup using react? – Sumter

Answer 1

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

Sandbox

Armipotent

can you share the answer with the sandbox URL? Because I need to play with the code. – Path

For complex and many deeply nested/complicated drag and drop logic you can take a look at react-dnd docs – Lynnelynnea