Пользовательский html AgGrid при перетаскивании

Так что, на самом деле, на данный момент нет возможности изменить шаблон «призрак», вы можете попытаться изучить глубже, чем я, вот точка входа: метод ag-grid\src\ts\dragAndDrop\dragAndDropService.ts и createGhost - именно то, что вам нужно. Одна вещь, которую вы можете сделать, - это переопределить это место только для себя и использовать вместо исходной библиотеки.

Созданный призрак можно было бы заменить на:

• Глобальное скрытие призрака при наведении курсора мыши путем добавления класса тела для предотвращения мерцания призрака (не забудьте удалить класс при наведении курсора мыши, чтобы другие сетки могли использовать призраков)
• Установите новое содержимое или измените стиль призрака при перетаскивании и удалите класс тела, чтобы показать нового призрака (помните, что призраки присутствуют в 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;
}