jQuery UI draggable：在拖拽时获取底层元素 [英] jQuery UI draggable: get the underlaying element at drag-stop

问题描述

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

Is it possible to get the underlaying element of an dragged element?

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

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?

这是我的HTML代码：

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>

jQuery部分在这里：

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

如果我拖动 td value 我停止拖动我想要在value元素下面的 td 元素。

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

提前致谢。

推荐答案

有一个简洁的小功能，它会找到你特定的元素功能： document.elementFromPoint（x，y）;

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

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

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

因此该函数将返回位于指定位置的所有元素。要获得想要的 td 过滤元素只包含 td s并删除拖动的 td 。

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.

参考

。elementFromPoint（）

.filter（）

.not（）

这篇关于jQuery UI draggable：在拖拽时获取底层元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！