react-grid-layout拖拽元素偏移鼠标指针及初始布局异常问题求助

我在学习react-grid-layout时遇到两个问题：

• 拖拽网格元素时，元素会偏移到鼠标指针右侧
• 初始渲染时所有网格都居中显示

目标是实现官方基础示例的左对齐、拖拽无偏移的布局效果。

问题演示截图：

我使用的代码如下，引入的grid样式文件为react-grid-layout官方的styles.css：

import GridLayout from "react-grid-layout";
import "./react_grid_layout/styles_grid.css";
import "./react_grid_layout/styles.resize.css";

function Dashboard(props) {
  return (
    <GridLayout className="layout" cols={12} rowHeight={30} width={1200}>
      <div className="bg-white" key="a" data-grid={{ x: 0, y: 0, w: 1, h: 2 }}>
        a
      </div>
      <div className="bg-white" key="b" data-grid={{ x: 1, y: 0, w: 3, h: 2 }}>
        b
      </div>
      <div className="bg-white" key="c" data-grid={{ x: 4, y: 0, w: 1, h: 2 }}>
        c
      </div>
    </GridLayout>
  );
}

解决方案 #

1. 修复初始居中问题 #

官方示例布局默认左对齐，出现居中通常是样式冲突导致：

• 检查父容器或全局样式，移除text-align: center、margin: 0 auto这类会让元素居中的属性
• 确保.layout类继承官方样式的左对齐规则，不要自定义覆盖为居中布局

2. 修复拖拽偏移问题 #

拖拽偏移多由样式干扰或宽度计算错误引发，按以下步骤排查：

• 移除自定义样式干扰：先去掉bg-white类，测试是否恢复正常。如果正常，说明该类的margin、padding或position属性影响了拖拽坐标计算，调整对应样式。
• 修正宽度设置：不要固定width为1200，若父容器宽度小于该值，会导致坐标计算偏差。建议改用响应式模式，让布局自适应容器宽度：

  import GridLayout from "react-grid-layout";
  import "react-grid-layout/css/styles.css";
  import "react-grid-layout/css/resizable.css";
  
  function Dashboard(props) {
    return (
      <GridLayout
        className="layout"
        cols={12}
        rowHeight={30}
        responsive={true}
        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
        layouts={{
          lg: [
            { x: 0, y: 0, w: 1, h: 2, key: "a" },
            { x: 1, y: 0, w: 3, h: 2, key: "b" },
            { x: 4, y: 0, w: 1, h: 2, key: "c" }
          ]
        }}
      >
        <div className="bg-white" key="a">a</div>
        <div className="bg-white" key="b">b</div>
        <div className="bg-white" key="c">c</div>
      </GridLayout>
    );
  }
  

• 调整样式引入顺序：确保官方样式在自定义样式之前引入，避免自定义样式覆盖拖拽相关的核心样式：

  import "react-grid-layout/css/styles.css";
  import "react-grid-layout/css/resizable.css";
  import GridLayout from "react-grid-layout";
  import "./react_grid_layout/your-custom-styles.css";
  

• 使用官方配套resize样式：不要自行引入非官方的resize样式，直接使用包内自带的resizable.css。

快速验证步骤 #

1. 暂时移除所有自定义样式和非官方样式，只保留官方基础代码和样式
2. 确认布局和拖拽恢复正常后，再逐步添加自定义样式，排查冲突点
3. 确保GridLayout的宽度与父容器实际宽度匹配，避免固定宽度导致的计算偏差

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