React Hooks实现可拖拽组件：避免首次拖拽无效问题的声明式方法

// App.js (部分代码)
const App = ({images}) => {
  const [selectedImages, setSelectedImages] = useState(images)
  const [dragId, setDragId] = useState()

  const handleDrag = (ev) => {
    setDragId(ev.currentTarget.id)
  }

  const handleDrop = (ev) => {
    // 假设 sortImages 存在并根据 dragId 排序
    const sortedImages = sortImages(selectedImages, dragId) 
    setSelectedImages(sortedImages)
  }

  return (
    <Container
      images={selectedImages}
      handleDrag={handleDrag}
      handleDrop={handleDrop}
    />
  )
}

// Container.js (问题代码)
const Container = ({ images, handleDrag, handleDrop }) => {
  const ref = useRef(null)

  useEffect(() => {
    if (ref.current) {
      // 清除旧的子元素以避免重复添加
      ref.current.innerHTML = ''; 

      for (let i = 0; i < images.length; ++i) {
        const draggable = document.createElement('div')
        draggable.ondragstart = handleDrag // 直接绑定 DOM 事件
        draggable.ondrop = handleDrop     // 直接绑定 DOM 事件

        const style = 'position: absolute; width: 100px; height: 100px; background: lightblue; margin: 5px; cursor: grab;' // 示例样式
        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>
  )
}

// Container.js (正确代码)
import React, { useRef } from 'react';

const Container = ({ images, handleDrag, handleDrop }) => {
  const containerRef = useRef(null); // 可以用来引用父容器，但子元素由React渲染

  return (
    <div ref={containerRef} style={{ position: 'relative', width: '100%', height: '300px', border: '1px solid #ccc' }}>
      {images.map((image) => (
        <div
          key={image.id} // 列表渲染必须提供唯一key
          id={image.id}
          draggable // HTML5 draggable 属性
          onDragOver={(ev) => ev.preventDefault()} // 允许放置操作
          onDrop={handleDrop}
          onDragStart={handleDrag}
          style={{
            position: 'absolute',
            left: `${image.x || 0}px`, // 假设 image 对象有 x, y 坐标用于定位
            top: `${image.y || 0}px`,
            width: '100px',
            height: '100px',
            background: 'lightblue',
            margin: '5px',
            cursor: 'grab',
            border: '1px solid blue'
          }}
        >
          {/* 可以放置图片或其他内容 */}
          {image.content || `Item ${image.id}`} 
        </div>
      ))}
    </div>
  );
};

export default Container;