react如何实现表头拖动

实现表头拖动的核心步骤

使用react-dnd库实现拖拽功能 安装react-dnd及其HTML5后端依赖：

npm install react-dnd react-dnd-html5-backend

创建可拖拽表头组件：

import { useDrag } from 'react-dnd';

const DraggableHeader = ({ id, children }) => {
  const [{ isDragging }, drag] = useDrag({
    type: 'COLUMN_HEADER',
    item: { id },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  return (
    <th
      ref={drag}
      style={{
        opacity: isDragging ? 0.5 : 1,
        cursor: 'move',
      }}
    >
      {children}
    </th>
  );
};

设置拖放目标区域

import { useDrop } from 'react-dnd';

const TableHeader = ({ columns, onColumnReorder }) => {
  const [, drop] = useDrop({
    accept: 'COLUMN_HEADER',
    drop: (item) => onColumnReorder(item.id),
  });

  return (
    <thead ref={drop}>
      <tr>
        {columns.map((column) => (
          <DraggableHeader key={column.id} id={column.id}>
            {column.title}
          </DraggableHeader>
        ))}
      </tr>
    </thead>
  );
};

处理列重新排序逻辑

在父组件中维护列状态：

const Table = () => {
  const [columns, setColumns] = useState([
    { id: 'name', title: 'Name' },
    { id: 'age', title: 'Age' },
    { id: 'email', title: 'Email' },
  ]);

  const handleColumnReorder = (draggedId) => {
    setColumns((prevColumns) => {
      // 实现列重新排序逻辑
      const draggedIndex = prevColumns.findIndex(col => col.id === draggedId);
      const newColumns = [...prevColumns];
      // 这里可以添加目标位置逻辑
      return newColumns;
    });
  };

  return (
    <table>
      <TableHeader columns={columns} onColumnReorder={handleColumnReorder} />
      {/* 表格内容 */}
    </table>
  );
};

添加视觉反馈效果

拖拽过程中的样式优化

th {
  transition: all 0.3s ease;
}

th.is-over {
  background-color: #f0f0f0;
  border-left: 2px dashed #999;
  border-right: 2px dashed #999;
}

修改拖放目标组件以添加视觉反馈

const TableHeader = ({ columns, onColumnReorder }) => {
  const [{ isOver }, drop] = useDrop({
    accept: 'COLUMN_HEADER',
    drop: (item) => onColumnReorder(item.id),
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  });

  return (
    <thead ref={drop} className={isOver ? 'is-over' : ''}>
      {/* ... */}
    </thead>
  );
};

实现精确列位置交换

改进拖放处理函数

const handleColumnReorder = (draggedId, targetId) => {
  setColumns((prevColumns) => {
    const draggedIndex = prevColumns.findIndex(col => col.id === draggedId);
    const targetIndex = prevColumns.findIndex(col => col.id === targetId);

    if (draggedIndex === targetIndex) return prevColumns;

    const newColumns = [...prevColumns];
    const [removed] = newColumns.splice(draggedIndex, 1);
    newColumns.splice(targetIndex, 0, removed);

    return newColumns;
  });
};

修改拖放目标组件以检测悬停位置

const TableHeader = ({ columns, onColumnReorder }) => {
  const [, drop] = useDrop({
    accept: 'COLUMN_HEADER',
    hover: (item, monitor) => {
      if (!monitor.isOver({ shallow: true })) return;
      // 获取当前悬停的列ID
      const targetId = /* 根据鼠标位置计算目标列ID */;
      if (item.id !== targetId) {
        onColumnReorder(item.id, targetId);
      }
    },
  });

  return (
    <thead ref={drop}>
      {/* ... */}
    </thead>
  );
};