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));
    }
});

如果我拖动具有类名为“value”的td，并停止拖动，我希望td元素位于value元素下方。

谢谢。

- Patrick Vogt

Answer 1

有一个很方便的小函数可以找到特定位置上的元素：document.elementFromPoint(x, y);

在stackoverflow上，我找到了一个很好的解决方案来确定该位置上所有的元素。 我在我的代码中引用了这个答案：

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

演示

这个功能将返回指定位置的所有元素。想要获取所需的td过滤元素，只包含td并删除拖动的td。

参考资料

.elementFromPoint()

.filter()

.not()

- empiric

---

谢谢你的解决方案。我稍微修改了一下，现在它运行得非常好！ - Patrick Vogt

非常好的解决方案...但有时会返回var td的-1值。请修复此问题。@empiric - Dev Matee