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

在mouseup上获取div下面的元素目标

1 个答案: