javascript - 在 mouseup 上获取元素下方的 div 目标

Question

假设我有这样的标记:

<div class="something1">
  Content 1
</div>
<div class="something2">
  Content 2
</div>

<div class="drag">
  Draggable div
</div>

现在，我已经编写了一些 jQuery 来允许拖动 .drag div。在拖动结束时，我会做这样的事情:

$(document).on('mouseup',function(e){
  console.log(e.target); 
});

当我将 div 拖到 .something1 上时，我想要的 e.target 的答案是 .something1。相反，因为 .drag 是在鼠标下拖动的，所以当 mouseup 函数执行时，目标仍然是 .drag div。

如何在 mouseup 期间看到鼠标悬停在哪个 div 上，而忽略正在拖动的 div？同样，我如何使用此方法查看在拖动发生时悬停在哪个 div 上？

(如果有帮助，我正在尝试构建拖放功能)

Answer 1

你不能触发 mouseup 事件，因为 .drag 不是 something1 或 something2 的子节点，那么，你总是会得到 e.target = .drag

但你还有其他选择 如果您编写自己的代码: 出于搜索原因，我向每个 div 添加了一个 id 属性。 (见下文js)

<div class="something1" id="something">
    Content 1
</div>
<div class="something2" id="something">
    Content 2
</div>

<div class="drag">
    Drag me
</div>

要知道你是哪个div，需要知道鼠标的位置和div的区域。看下一个

function getHoverElement(x,y){
    element = "none";
    $('div#something').each(function(i){
        el = this;
        el_left = $(el).offset().left;
        el_right= $(el).offset().left + $(el).width();
        el_top = $(el).offset().top;
        el_bottom = $(el).offset().top + $(el).height();

        if (x >= el_left && x <= el_right) {
            if (y >= el_top && y <= el_bottom) {
                element = $(el).attr('class');
                return false;
            }
        }
    });
    return element;
}

x 和 y 是从 mouseup 事件传递过来的。查看working example

显然，此解决方案仅基于鼠标位置，不考虑可拖动元素的边距。因此，如果您需要改进代码，您需要查看 drag 元素边框。

另一个解决方案是使用 jquery-ui 中的 draggable/droppable 方法来解决这个问题。

$(".something1, .something2").droppable({
    drop: function(event, ui) {
        console.log($(this).attr('id'));
    }
});

参见 working example