如何通过拖拽表格主体实现Ag-Grid React表格水平滚动

核心实现思路 #

通过监听鼠标的mousedown、mousemove、mouseup事件，记录拖拽过程中的鼠标偏移量，以此控制表格容器的水平滚动位置，模拟抓取拖拽滚动的效果。

修改后的组件代码 #

import { useEffect, useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const DraggableHorizontalGrid = ({ rowData, colDefs }) => {
  const gridContainerRef = useRef(null);
  const dragState = useRef({
    isDragging: false,
    startX: 0,
    startScrollLeft: 0,
  });

  useEffect(() => {
    const container = gridContainerRef.current;
    if (!container) return;

    const handleMouseDown = (e) => {
      // 只在鼠标左键按下时触发，排除输入类元素避免干扰文本编辑
      if (e.button !== 0 || e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
      dragState.current = {
        isDragging: true,
        startX: e.clientX,
        startScrollLeft: container.scrollLeft,
      };
      container.style.cursor = 'grabbing';
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    };

    const handleMouseMove = (e) => {
      if (!dragState.current.isDragging) return;
      const deltaX = e.clientX - dragState.current.startX;
      container.scrollLeft = dragState.current.startScrollLeft - deltaX;
    };

    const handleMouseUp = () => {
      dragState.current.isDragging = false;
      gridContainerRef.current.style.cursor = 'grab';
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };

    container.addEventListener('mousedown', handleMouseDown);
    container.style.cursor = 'grab';

    return () => {
      container.removeEventListener('mousedown', handleMouseDown);
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, []);

  return (
    <div 
      ref={gridContainerRef}
      className="py-5 overflow-x-auto"
      style={{ width: '100%' }}
    >
      <AgGridReact
        rowData={rowData}
        columnDefs={colDefs}
        defaultColDef={{
          sortable: false,
          resizable: false,
          cellStyle: {
            display: 'flex',
            alignItems: 'center',
            fontSize: '12px',
          },
          // minWidth: 100,
        }}
        rowClass={'hover:bg-gray-50'}
        rowHeight={60}
        domLayout="autoHeight"
        autoSizeStrategy={{ type: 'fitCellContents' }}
        suppressColumnVirtualisation={true}
        suppressCellFocus={true}
        enableCellTextSelection={true}
        suppressRowHoverHighlight={true}
      />
    </div>
  );
};

export default DraggableHorizontalGrid;

关键细节说明 #

• 容器Ref绑定：给外层div添加ref，用于获取容器DOM元素，直接控制其scrollLeft属性实现滚动。
• 拖拽状态管理：用useRef存储拖拽状态，避免组件重渲染导致状态丢失。
• 事件监听逻辑：
  • mousedown：记录初始位置，切换鼠标样式为抓取态，绑定全局移动/松开事件确保拖拽不脱离容器范围。
  • mousemove：计算鼠标偏移量，反向调整滚动位置（鼠标右移时表格左滚，符合直观拖拽逻辑）。
  • mouseup：重置拖拽状态，恢复鼠标样式，移除全局事件监听避免内存泄漏。
• 交互冲突规避：排除输入类元素的触发，防止拖拽功能干扰文本编辑操作。

内容的提问来源于stack exchange，提问作者Gazi_Fayaz_Ahmed