Vue版ag-grid 21.2.1整行作为拖拽把手的实现方法问询

我之前在Vue项目里用ag-grid 21.x版本的时候刚好解决过这个问题，给你分享下亲测有效的实现方式：

首先，不用给.ag-row加pointer-events: none，这个反而会破坏行本身的事件逻辑。正确的思路是把ag-grid原生的拖拽把手容器（.ag-row-drag）放大到覆盖整个行，这样点击行的任何位置都能触发拖拽。

具体实现步骤： #

1. 确保行拖拽已启用
   先确认你的grid配置里已经开启了行拖拽，比如在gridOptions里设置：

   gridOptions: {
     rowDrag: true,
     // 其他配置...
   }
   

2. 添加穿透样式（Vue scoped场景）
   因为Vue组件的样式是scoped的，需要用::v-deep来穿透ag-grid的封装样式：

   ::v-deep .ag-row {
     position: relative; /* 让拖拽容器相对于行定位 */
   }
   
   ::v-deep .ag-row-drag {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     cursor: grab; /* 显示拖拽光标，提升用户体验 */
   }
   
   /* 可选：隐藏原生的小拖拽图标，如果不需要显示的话 */
   ::v-deep .ag-row-drag .ag-icon-grip {
     display: none;
   }
   

3. 兼容行内交互元素（如果有的话）
   如果你的行里有按钮、链接这类需要点击的元素，需要给它们设置更高的层级，避免被拖拽容器挡住：

   ::v-deep .ag-cell .your-interactive-class {
     position: relative;
     z-index: 10; /* 确保元素在拖拽容器之上 */
   }
   

这样设置后，整行的任何区域都能触发拖拽，同时也不会影响行内交互元素的正常使用。我当时用这个方案在21.2.1版本上完美跑通了，你可以试试~

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