React Hooks实现可拖拽组件：声明式渲染与事件处理指南

// 存在问题的Container组件示例
const Container = ({ images, handleDrag, handleDrop }) => {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      // 循环创建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; background-color: lightblue; margin: 5px; cursor: grab;';

        draggable.setAttribute('style', style);
        draggable.setAttribute('draggable', true);
        draggable.setAttribute('id', images[i].id);

        ref.current.appendChild(draggable);
      }
    }
    // 注意：这里缺少清理函数，会导致重复添加
    return () => {
        if (ref.current) {
            ref.current.innerHTML = ''; // 简单清理，但不够严谨
        }
    };
  }, [images, ref, handleDrag, handleDrop]); // 依赖项

  return (
    <div className={'relative'}>
      <div ref={ref} /> {/* 渲染一个空的div作为容器 */}
    </div>
  );
};

import React, { useState } from 'react';

// 假设有一个排序函数，根据拖拽ID重新排列图片数组
const sortImages = (images, dragId) => {
  // 实际的排序逻辑会更复杂，这里仅为示例
  // 比如：找到dragId对应的图片，然后根据drop目标的位置插入
  console.log(`Sorting images based on dragId: ${dragId}`);
  // 返回一个新的排序后的图片数组
  return [...images]; // 暂时返回原数组，实际项目中需要实现排序逻辑
};

const App = ({ initialImages }) => {
  const [selectedImages, setSelectedImages] = useState(initialImages);
  const [dragId, setDragId] = useState(null); // 存储正在拖拽的元素ID

  // 处理拖拽开始事件
  const handleDrag = (ev) => {
    setDragId(ev.currentTarget.id); // 设置被拖拽元素的ID
    console.log(`Drag started for ID: ${ev.currentTarget.id}`);
  };

  // 处理拖拽结束（放置）事件
  const handleDrop = (ev) => {
    ev.preventDefault(); // 阻止默认行为，允许放置
    console.log(`Drop occurred. DragId: ${dragId}, Drop target ID: ${ev.currentTarget.id}`);
    const sortedImages = sortImages(selectedImages, dragId, ev.currentTarget.id); // 假设sortImages需要drop目标ID
    setSelectedImages(sortedImages); // 更新图片列表状态
    setDragId(null); // 清除拖拽ID
  };

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

export default App;

import React, { useRef } from 'react';

const Container = ({ images, handleDrag, handleDrop }) => {
  const containerRef = useRef(null); // 仍然可以使用ref来引用容器DOM，但不再用于创建子元素

  return (
    <div ref={containerRef} style={{ display: 'flex', flexWrap: 'wrap', border: '1px solid #ccc', padding: '10px' }}>
      {images.map((image) => (
        <div
          key={image.id} // 列表渲染必须提供唯一的key
          id={image.id}
          draggable // 声明此元素可拖拽
          onDragOver={(ev) => ev.preventDefault()} // 关键：阻止默认行为，使元素成为有效的放置目标
          onDrop={handleDrop} // 放置事件处理器
          onDragStart={handleDrag} // 拖拽开始事件处理器
          style={{
            position: 'relative', // 示例样式
            width: '100px',
            height: '100px',
            backgroundColor: '#f0f0f0',
            border: '1px solid #aaa',
            margin: '5px',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            cursor: 'grab',
            boxShadow: '2px 2px 5px rgba(0,0,0,0.2)'
          }}
        >
          {image.id} {/* 显示图片ID作为内容 */}
        </div>
      ))}
    </div>
  );
};

export default Container;