AgGrid custom html on drag

So, actually, there is no possibility for now to modify 'ghost' template, you can try to explore deeper than I did, here is an entry point: ag-grid\src\ts\dragAndDrop\dragAndDropService.ts and createGhost method - exactly what you need. One thing that you can do is to override this place just for yourself and use instead of the original library.

It would be possible to replace the created ghost by:

• Globally hiding the ghost on mouseover by adding a body class to prevent flickering of ghost (remember to remove the class on mouseout to allow other grids to use ghosts)
• Set new content or change styling of ghost on drag enter and remove the body class to show the new ghost (remember ghosts are only present in the DOM during drag)

Hide ghost on mouse over and mouse out:

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

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

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

Replace ghost and styling, and unhide ghost:

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; 

The body -> ghost CSS styling:

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