I was using Infragistics drag-and-drop framework and set an HTML table element as my drop target. Now I needed to know during drag operation over which HTML table cell I am moving. I needed that in order to dynamically change appearance of draggable markup depending on which cell I am currently over.

(Think a strategy game – you’re placing construction on the terrain – if there is enough unoccupied room – the draggable item becomes green, otherwise it remains red).

The solution is to use elemAtPoint property during DragMoveHandler event. Register the event handler during page load:

var g_ddb; //drag and drop behaviour

function pageLoad(sender, args) {
//attachng drag-move event handler
g_ddb.get_events().addDragMoveHandler(dragMoveHandler);
//some other initialization code
//...
}

and then during the drag operation when this handler is called – use elemAtPoint property to retreive HTML element:

function dragMoveHandler(sender, args) {
//getting element over which drag move is happening
var oEl = args.get_manager()._currentTarget.elemAtPoint;
//using that element
//...
}