javascript - 如何使用 javascript 和 react hooks 创建可拖动组件？

Question

我需要将可拖动的 div(一组图像中的每个图像一个)添加到容器中。
以下内容仅适用于第二次拖动。即我必须拖动组件两次才能移动。它显然与所使用的钩子(Hook)以及 div 的创建方式有关。任何帮助将不胜感激。
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

看起来它在第一次拖动时设置了 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

Sandbox