react如何实现表头拖动

实现表头拖动的步骤

使用 react-dnd 库 安装 react-dnd 及其依赖：

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

创建可拖动的表头组件：

import { useDrag } from 'react-dnd';

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

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

使用 react-dnd 实现放置目标 创建可放置的表头容器组件：

import { useDrop } from 'react-dnd';

const TableHeader = ({ columns, onColumnReorder }) => {
  const [, drop] = useDrop({
    accept: 'COLUMN',
    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>
  );
};

完整示例 将上述组件整合到表格中：

import React, { useState } from 'react';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

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

  const handleColumnReorder = (draggedId) => {
    // 实现列重新排序的逻辑
  };

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

使用 react-beautiful-dnd 库

安装 react-beautiful-dnd

npm install react-beautiful-dnd

实现可拖动表头

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const TableHeader = ({ columns, onColumnReorder }) => {
  const handleDragEnd = (result) => {
    if (!result.destination) return;
    const newColumns = Array.from(columns);
    const [removed] = newColumns.splice(result.source.index, 1);
    newColumns.splice(result.destination.index, 0, removed);
    onColumnReorder(newColumns);
  };

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <Droppable droppableId="columns" direction="horizontal">
        {(provided) => (
          <thead ref={provided.innerRef} {...provided.droppableProps}>
            <tr>
              {columns.map((column, index) => (
                <Draggable key={column.id} draggableId={column.id} index={index}>
                  {(provided) => (
                    <th
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      {column.title}
                    </th>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </tr>
          </thead>
        )}
      </Droppable>
    </DragDropContext>
  );
};

自定义实现

基本拖动逻辑 监听鼠标事件实现拖动：

const TableHeader = ({ columns, onColumnReorder }) => {
  const [draggedIndex, setDraggedIndex] = useState(null);

  const handleMouseDown = (index) => {
    setDraggedIndex(index);
  };

  const handleMouseMove = (e) => {
    if (draggedIndex === null) return;
    // 计算拖动位置并更新列顺序
  };

  const handleMouseUp = () => {
    setDraggedIndex(null);
  };

  return (
    <thead onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
      <tr>
        {columns.map((column, index) => (
          <th
            key={column.id}
            onMouseDown={() => handleMouseDown(index)}
            style={{ cursor: 'move' }}
          >
            {column.title}
          </th>
        ))}
      </tr>
    </thead>
  );
};

样式优化 为拖动中的列添加视觉反馈：

th.dragging {
  opacity: 0.5;
  border: 2px dashed #ccc;
}