How to create draggable components with javascript and react hooks?

Question

. 。 Answers to this question are eligible for a +100 reputation bounty. grabury wants to to this 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. ie 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?

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

Answer 2

visit this site I think it can be helpful:

https://www.w3schools.com/howto/howto_js_draggable.asp