AgGrid自定义HTML拖动

Question

我正在研究更改aggrid组件的拖动悬停。我找不到很多东西……有人知道如何在拖动模式下更改行的样式吗？

我的目标是制作不同的动画（整行），例如材料UI / UX

https://material.io/design/components/lists.html#behavior

Answer 1

因此，实际上，目前尚不可能修改“ ghost”模板，您可以尝试比我更深入地探索，这里是一个切入点：ag-grid\src\ts\dragAndDrop\dragAndDropService.ts和createGhost方法-完全是您需要什么。您可以做的一件事是自己改写这个地方，而不是使用原始库。

Answer 2

可以通过以下方式替换创建的幽灵：

• 通过添加 body 类来全局隐藏鼠标悬停时的重影以防止重影闪烁（记得在 mouseout 时移除该类以允许其他网格使用重影）
• 在拖动输入时设置新内容或更改 ghost 样式并删除 body 类以显示新的 ghost（请记住，ghost 仅在拖动过程中出现在 DOM 中）

在鼠标悬停和鼠标移开时隐藏重影：

function onCellMouseOver(event) {
  document.body.classList.add('cellDragRendererOn');
}

function onCellMouseOut(){
  document.body.classList.remove('cellDragRendererOn');
}

gridOptions.onCellMouseOver = onCellMouseOver;
gridOptions.onCellMouseOut = onCellMouseOut;

替换重影和样式，并取消隐藏重影：

function onRowDragEnter() {
  var ghost = document.querySelector('.ag-dnd-ghost');
  ghost.style.background = 'red';
  ghost.innerHTML = '<span class="myClass">My message</span>';
  document.body.classList.remove('cellDragRendererOn');
}

gridOptions.onRowDragEnter = onRowDragEnter; 

主体 -> 幽灵 CSS 样式：

.cellDragRendererOn .ag-dnd-ghost{
  display: none !important;
}