jQuery UI draggable: 在拖动停止处获取底层元素

Question

是否可以获取拖动元素的底层元素？

我的具体任务是拖一个td元素。如果触发了 dragstop 事件，我需要底层元素。底层元素也是 td.

我怎样才能做到这一点？

这是我的 HTML 代码：

<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>

jQuery 部分在这里：

$('.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));
    }
});

如果我将 td 与 class value 一起拖动并停止拖动，我希望 td 元素位于值元素下方。

提前致谢。

Answer 1

有一个简洁的小函数可以找到特定函数的元素：document.elementFromPoint(x, y);

所以我找到了一个很好的 solution 来确定那个位置上的 all 元素。我在我的代码中引用了这个答案：

$('.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

因此该函数将 return 所有位于指定位置的元素。要获得想要的 td 过滤元素以仅包含 tds 并删除拖动的 td.

参考

.elementFromPoint()

.filter()

.not()