如何实现从外部Div拖拽到Ag-Grid指定行？

核心解决逻辑 #

要搞定外部元素拖到Ag-Grid指定行的需求，关键是在拖拽过程中用Ag-Grid的API捕获鼠标悬停的目标行节点，拿到它的位置信息后，在放置时把数据插入对应位置。

具体实现步骤 #

• 1. 配置外部元素的拖拽基础
  给外部元素加上draggable="true"，并在dragstart事件里存好拖拽数据：

  <div draggable="true" (dragstart)="handleDragStart($event)">
    要拖拽的元素
  </div>
  

  handleDragStart(event: DragEvent) {
    // 把需要插入的数据存到拖拽对象里，这里示例存一个简单对象
    event.dataTransfer?.setData('text/plain', JSON.stringify({ id: Date.now(), name: '新添加的行' }));
  }
  

• 2. 给Ag-Grid绑定拖拽监听事件
  在Ag-Grid组件上绑定dragOver、drop事件，还要禁用默认行为避免冲突：

  <ag-grid-angular
    [rowData]="tableData"
    [columnDefs]="columnConfigs"
    (gridReady)="onGridReady($event)"
    (dragOver)="handleGridDragOver($event)"
    (drop)="handleGridDrop($event)"
    (dragLeave)="handleGridDragLeave($event)"
  ></ag-grid-angular>
  

• 3. 在拖拽悬停时捕获目标行节点
  用Ag-Grid的api.getRowNodeForEvent()方法，从事件里拿到当前鼠标停着的行节点，还可以加个高亮反馈：

  private targetRowNode: RowNode | null = null;
  private gridApi: GridApi | null = null;
  
  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;
  }
  
  handleGridDragOver(event: DragEvent) {
    event.preventDefault(); // 必须调用，否则无法触发drop事件
    if (!this.gridApi) return;
  
    const hoveredRowNode = this.gridApi.getRowNodeForEvent(event);
    if (hoveredRowNode && hoveredRowNode !== this.targetRowNode) {
      // 清除上一个目标行的高亮
      this.targetRowNode?.setRowStyle({});
      // 高亮当前悬停行
      hoveredRowNode.setRowStyle({ backgroundColor: '#f0f8ff' });
      this.targetRowNode = hoveredRowNode;
    }
  }
  

• 4. 在放置时插入数据到指定位置
  拿到拖拽数据和目标行节点后，获取行索引，把新数据插入到对应位置，然后刷新网格：

  handleGridDrop(event: DragEvent) {
    event.preventDefault();
    if (!this.targetRowNode || !this.gridApi) return;
  
    const dragData = JSON.parse(event.dataTransfer?.getData('text/plain') || '{}');
    const targetIndex = this.targetRowNode.rowIndex;
    // 插入数据到目标位置
    this.tableData.splice(targetIndex, 0, dragData);
    // 通知网格刷新数据
    this.gridApi.setRowData([...this.tableData]);
  
    // 清除高亮并重置目标节点
    this.targetRowNode.setRowStyle({});
    this.targetRowNode = null;
  }
  

• 5. 处理拖拽离开网格的情况
  当鼠标拖出网格时，清除目标行的高亮样式：

  handleGridDragLeave(event: DragEvent) {
    if (this.targetRowNode) {
      this.targetRowNode.setRowStyle({});
      this.targetRowNode = null;
    }
  }
  

额外提示 #

• 如果需要区分插入到行的上方还是下方，可以通过计算鼠标在目标行内的垂直偏移量来判断，比如用event.clientY减去行元素的getBoundingClientRect().top，再和行高的一半比较。
• 确保RowNode和GridApi的类型正确，需要导入Ag-Grid的相关类型定义。

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