React ag-grid - 将网格拖动到网格时识别overnode

Question

我正在使用带有反应的 ag-grid。 我有一个非树网格和树网格。 我希望能够在两者中重新排序，在树网格中重新排序，并从网格拖动到网格。 我遇到了两个特殊问题，不确定 ag-grid 是否支持我的用例。

当从一个网格拖动到另一个网格时，我可以使用以下方法从一个网格中获取 dropzone 参数并将它们设置在另一个网格上。

const grid1DropzoneParams = {
  onDragging: (e) => console.log('onDragging - grid1', {...e}),
  onDragEnter: (e) => console.log('onDragEnter - grid1', {...e}),
  onDragLeave: (e) => console.log('onDragLeave - grid1', {...e}),
  onDragStop: (e) => console.log('onDragStop - grid1', {...e}),
  getContainer: grid1Api.getRowDropZoneParams().getContainer,
};
grid2Api.addRowDropZone(grid1DropzoneParams);

不幸的是，如果从一个网格到另一个网格，则e.overNode值未正确设置。 它是 null 或引用源网格中的值（在这种情况下，来自 grid2 的某些实体，而不是在 grid1 中悬停的实际实体）。 结果，当我从一个网格拖动到另一个网格时，我无法确定我正在拖动（或在其之间）哪个项目。

在我在文档中找到的 ag-grid 示例中，我只看到了从一个网格拖动到另一个网格的引用，其中网格是通用存储桶，而不是能够从一个网格拖动并在另一个网格中重新排序/重新设置为原子操作（或者，换句话说，在从网格到网格的初始拖动过程中，选择目标网格中源实体的位置）。 我唯一的选择是在源网格上使用dndSource=true手动完全处理 dnd 吗？ dndSource不能很好地与rowDrag配合使用，这意味着我需要手动处理所有 DnD，即使在网格内也是如此（我相信）。

有点相关，但可能值得一个单独的问题，我无法在树形网格中重新排序。 我可以通过拖动来重新父级，但不能在两个兄弟姐妹之间（或列表的顶部/底部）拖动。 同样，我能找到的唯一 ag-grid 示例是树形网格，它显示了重新父级，但没有在父级内部或父级之间重新排序。

Answer 1

我在这里找到了一个解决方案，以防它帮助其他人。 我正在使用rowDrag=true和一个外部 dropzone。 为了让实体被拖到外部网格上，我使用以下（其中 gridApiRef 是对网格 api 的反应参考）

const getAgGridNodeBeingDraggedOver(dragEvent) {
  const elements = document.elementsFromPoint(
    dragEvent.event.clientX,
    dragEvent.event.clientY
  )
  const agGridRow = elements.find((r) => r.classList.contains('ag-row'))
  if (agGridRow) {
    const idOfRow = agGridRow.getAttribute('row-id')
    const rowNode = gridApiRef.current.getRowNode(idOfRow)
    return rowNode
  }
  return null
}

Answer 2

我有同样的问题，正在通过使用来解决它

const rowElement = args.event.srcElement.closest('[role=row]');
if (rowElement) {
    const id = rowElement.getAttribute('row-id');
    const targetNode = this.gridOptions.api.getRowNode(id);
}