AG Grid行拖拽：如何限制行拖拽范围至网格内？

嘿，我对AG Grid的行拖拽配置门儿清，你遇到的这个问题其实只需要加一个关键配置就能搞定！

• 核心配置：rowDragBoundary
  这个属性的作用就是指定行拖拽的边界元素，只要把它设置为AG Grid的容器元素，就能限制拖拽的行只能在网格范围内移动，不会拖到页面其他地方。

• 具体实现步骤

  1. 首先确保你已经开启了行拖拽功能（gridOptions.rowDrag: true，或者在列定义里单独设置rowDrag: true）
  2. 在网格初始化完成后，通过AG Grid的API获取网格的容器元素，赋值给rowDragBoundary：
     • 你可以用api.getGridPanelElement()方法直接拿到网格的核心容器，这个元素就是天然的拖拽边界。

• 示例代码
  下面是一个基础的JS示例，你可以直接参考：

  const gridOptions = {
    columnDefs: [
      { field: 'id', headerName: 'ID' },
      { field: 'name', headerName: '名称', rowDrag: true }, // 开启列级拖拽
      // 其他列定义...
    ],
    rowData: [/* 你的数据 */],
    rowDrag: true, // 全局开启行拖拽
    onGridReady: (params) => {
      // 网格就绪后设置拖拽边界
      gridOptions.rowDragBoundary = params.api.getGridPanelElement();
    }
  };
  

  如果你用的是React/Vue等框架，思路也是一样的：在组件挂载完成后，通过AG Grid的实例获取api，然后设置rowDragBoundary就行。

• 额外提醒
  如果你的项目里用了自定义的拖拽代理（比如重写了rowDragText或者自定义拖拽组件），只要确保拖拽代理的父级是网格容器，这个配置依然生效。默认的AG Grid拖拽逻辑已经完美适配这个边界限制，所以不用额外调整拖拽代理的样式或位置。

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