jQuery UI可拖动：在拖动停止时获取底层元素

Question

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 underlaying element is also a td .

How could I achiev this?

Here is my HTML code:

<table class="grid">
     <tr>
         <td class="value" colspan="4"></td>
         <td></td>
     </tr>
     <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
     </tr>
</table>

The jQuery part is here:

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

If I drag the td with the class value and I stop dragging I want the td element under the value element.

Thanks in advance.

Answer 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 td s and remove the dragged td .

Reference

.elementFromPoint()

.filter()

.not()