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拖动value并停止拖动，我想在value元素下使用td元素。

提前致谢。

Answer 1

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

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

$('.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并删除拖动的td。

<强>参考

.elementFromPoint()

.filter()

.not()

jQuery UI draggable：在拖拽时获取底层元素

1 个答案: