使用React Hooks创建可拖拽组件的正确姿势

// 不推荐的实现方式示例
import React, { useEffect, useRef } from 'react';

const Container = ({ images, handleDrag, handleDrop }) => {
  const ref = useRef(null); // 用于获取容器的DOM引用

  useEffect(() => {
    if (ref.current) {
      // ⚠️ 问题所在：在useEffect中命令式地创建DOM元素并绑定事件
      for (let i = 0; i < images.length; ++i) {
        const draggable = document.createElement('div');
        draggable.ondragstart = handleDrag; // 直接绑定原生事件
        draggable.ondrop = handleDrop;     // 直接绑定原生事件

        const style = 'position: absolute; width: 100px; height: 100px; border: 1px solid blue; background-color: #e0e0e0; cursor: grab;';
        draggable.setAttribute('style', style);
        draggable.setAttribute('draggable', true);
        draggable.setAttribute('id', images[i].id);

        ref.current.appendChild(draggable);
      }
    }
    // 注意：这里的清理函数可能不完整，可能导致重复添加或内存泄漏
    return () => {
      // 实际应用中需要清理掉所有appendChild的元素
      if (ref.current) {
         ref.current.innerHTML = ''; // 简单粗暴的清理，但不推荐
      }
    };
  }, [images, ref, handleDrag, handleDrop]); // 依赖项

  return (
    <div className={'relative'} style={{ border: '2px dashed gray', minHeight: '200px', position: 'relative' }}>
      <div ref={ref} /> {/* 实际内容被添加到了这个div中 */}
    </div>
  );
};

export default Container;

// App.js
import React, { useState } from 'react';
import Container from './Container'; // 假设Container组件在单独的文件中

// 辅助函数：根据拖拽ID对图片进行排序 (此为示例，具体实现根据业务逻辑而定)
const sortImages = (images, dragId, dropTargetId = null) => {
  console.log(`正在排序：拖拽ID为 ${dragId}，目标ID为 ${dropTargetId}`);
  // 实际的排序逻辑，例如：
  // 1. 找到dragId对应的图片
  // 2. 找到dropTargetId对应的图片（如果适用）
  // 3. 重新排列selectedImages数组
  const newImages = [...images];
  const draggedItemIndex = newImages.findIndex(item => item.id === dragId);
  if (draggedItemIndex === -1) return images;

  const [draggedItem] = newImages.splice(draggedItemIndex, 1);

  if (dropTargetId) {
    const dropTargetIndex = newImages.findIndex(item => item.id === dropTargetId);
    if (dropTargetIndex !== -1) {
      newImages.splice(dropTargetIndex, 0, draggedItem);
    } else {
      newImages.push(draggedItem); // 如果找不到目标，放到最后
    }
  } else {
    newImages.push(draggedItem); // 如果没有明确目标，也放到最后
  }

  return newImages;
};

const App = () => {
  const initialImages = [
    { id: 'img1', src: 'image1.jpg', alt: 'Image 1' },
    { id: 'img2', src: 'image2.jpg', alt: 'Image 2' },
    { id: 'img3', src: 'image3.jpg', alt: 'Image 3' },
  ];

  const [selectedImages, setSelectedImages] = useState(initialImages);
  const [dragId, setDragId] = useState(null); // 用于存储当前被拖拽元素的ID

  const handleDragStart = (ev) => {
    // 设置拖拽数据，这里我们只关心ID
    ev.dataTransfer.setData('text/plain', ev.currentTarget.id);
    setDragId(ev.currentTarget.id);
    console.log('拖拽开始:', ev.currentTarget.id);
  };

  const handleDrop = (ev) => {
    ev.preventDefault(); // 阻止默认行为，允许放置
    const droppedOnId = ev.currentTarget.id; // 获取放置目标的ID (如果是放置到另一个可拖拽元素上)
    const data = ev.dataTransfer.getData('text/plain'); // 获取拖拽开始时设置的数据

    console.log(`放置事件：拖拽ID为 ${data}，放置在 ${droppedOnId}`);

    if (data && dragId) { // 确保有拖拽数据和已设置的dragId
      const sortedImages = sortImages(selectedImages, data, droppedOnId);
      setSelectedImages(sortedImages);
      setDragId(null); // 拖拽完成后重置dragId
    }
  };

  // 允许放置的区域需要监听 onDragOver 并阻止默认行为
  const handleDragOver = (ev) => {
    ev.preventDefault();
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>可拖拽图片容器</h1>
      <Container
        images={selectedImages}
        handleDragStart={handleDragStart}
        handleDrop={handleDrop}
        handleDragOver={handleDragOver}
      />
    </div>
  );
};

export default App;

// Container.js
import React from 'react';

const Container = ({ images, handleDragStart, handleDrop, handleDragOver }) => {
  return (
    <div
      style={{
        border: '2px dashed gray',
        minHeight: '200px',
        position: 'relative', // 容器需要相对定位，以便子元素可以绝对定位
        padding: '10px',
        display: 'flex', // 使用flex布局来排列可拖拽项
        flexWrap: 'wrap',
        gap: '10px',
      }}
      onDragOver={handleDragOver} // 在容器上监听 onDragOver
      onDrop={handleDrop}         // 在容器上监听 onDrop
    >
      {images.map((image) => (
        <div
          key={image.id} // 列表渲染时必须提供唯一的key
          id={image.id}
          draggable // 标记为可拖拽
          onDragStart={handleDragStart} // 拖拽开始时触发
          onDragOver={handleDragOver}   // 允许将其他元素放置到此元素上方
          onDrop={handleDrop}           // 允许将其他元素放置到此元素上
          style={{
            width: '100px',
            height: '