Jquery Ui Draggable: Get The Underlaying Element At Drag-stop

Is it possible to get the underlaying element of an dragged element? My specific task is to drag a td element. If the dragstop event is fired I want the underlaying element. The un

Solution 1:

There is a neat little function wich will find you the element on a specific function: document.elementFromPoint(x, y);

On SO I found a good solution to determine all elements on that position. I refer to this answer in my code:

$('.value').draggable({
    cursor: "move",
    containment: ".grid",
    snap: "td",
    start: function(event, ui) {
    },
    stop: function(event, ui) {

        var el = allElementsFromPoint(event.pageX, event.pageY);
        var td = $(el).filter('td').not($(this));
        td.css({'backgroundColor': 'red'});
    }
});

Demo

So the function will return all elements that lies at the specified position. To get the wanted td filter the elements to only contain tds and remove the dragged td.

Reference

.elementFromPoint()

.filter()

.not()