javascript - 可拖动元素被放到哪里了？

Question

我有以下 draggable 调用，使用 jqueryui :

$someElm.draggable({     
    helper: "clone",         
    stop: function (ev, ui) {
        /* where was this dropped? */            
    }                        
});                          

在停止处理程序中，我需要放置目标。我不使用 droppable，只使用draggable。

那么，我怎样才能获得放置目标呢？

ev.target 似乎是拖动的元素。

<小时/>

目标我的意思是可拖动对象被放置的顶部元素(拖动停止)。这可能与 ev.target.parent() 不同。

与点击处理程序建立关联:

div.foo > div.bar

监听 div.foo 上的点击将捕获 div.bar 上的点击，但 ev.target 将是 div .bar 如果点击是在 div.bar 元素上完成的(否则它将是 div.foo)。

Answer 1

ui 变量包含 offset 属性(具有 left 和 top 值)。

使用 document.elementFromPoint 函数，我们可以获取该位置上的元素，该元素正是放置元素的位置:

$someElm.draggable({     
    helper: "clone",         
    stop: function (ev, ui) {
       var dropTarget = $(document.elementFromPoint(ui.offset.left, ui.offset.top));
    }                        
});                          

即使它看起来像一个黑客，它似乎是做到这一点的唯一方法(如果有更好的替代帖子答案/评论)。

Document.elementFromPoint(x, y)

x and y specify the coordinates to check, in CSS pixels relative to the upper-left corner of the document's containing window or frame.

Returns the element from the document whose elementFromPoint method is being called which is the topmost element which lies under the given point. To get an element, specify the point via coordinates, in CSS pixels, relative to the upper-left-most point in the window or frame containing the document.