可拖动元素放在哪里？答案

【问题标题】：Where was dropped the draggable element?可拖动元素放在哪里？
【发布时间】：2014-10-27 14:46:13
【问题描述】：

我有以下draggable 电话，使用jqueryui：

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

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

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

ev.target似乎是被拖拽的元素。

target 是指放置可拖动对象的顶部元素（拖动停止）。这可能与 ev.target.parent() 不同。

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

div.foo > div.bar

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

【问题讨论】：

@Anton 那是被拖拽元素的父元素，但是被拖拽的区域可能是另一个元素。
你不能对所有可放置元素使用一个公共类，然后使用$(ev.target).closest('.droppable') 例如？
@A.Wolff 我可以，但ev.target 不在元素上，在不同的级别上。
你应该提供一个 jsFiddle 来复制你的问题
@LeeTaylor 我不需要 droppable。请参阅我的解决方法。

标签： jqueryui javascript jquery jquery-ui

【解决方案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));
    }                        
});

即使它看起来像一个 hack，它似乎也是这样做的唯一方法（如果有更好的替代帖子答案/cmets）。

Document.elementFromPoint(x, y)

x 和 y 指定要检查的坐标，以 CSS 像素为单位，相对于文档的包含窗口或框架的左上角。

返回正在调用其 elementFromPoint 方法的文档中的元素，该元素是位于给定点下方的最顶部元素。要获取元素，请通过坐标指定点，以 CSS 像素为单位，相对于包含文档的窗口或框架中的左上角点。

【讨论】：