javascript - 如何在 onmouseup 上获取坐标？

Question

我构建了一个 javascript 应用程序，用于在同一页面中将 div 从一个地方拖放到另一个地方。我已经制作了拖动部分。我有 div 的坐标，我必须在其中放下 div，但我被困在应该引入条件以匹配目标区域的 div 的部分。基本上，div 可以放在任何 div 之上，但如果在 onmouseup 事件上我在任何靠近目标 div 的地方，它们必须正好放在目标 div 之上。我正在考虑将我的 dragged(onmousdown) div 的 top 和 left 属性分配给目标 div，但我可能错了。请指导我完成这部分。 这是我需要帮助的部分:

function mouseUp(e)
{
    e = e || window.event;
    var mousePos = mouseCoords(e);
    var itemPosition = getPosition(id);
    //console.log("This is at: "+itemPosition);
    //console.log(mousePos);
    console.log(getPosition(id));
    for(var i=0;i<destination.length;i++)
    {
        var curTarget = destination[i];
        var targPos = getPosition(curTarget);
        var targWidth = parseInt(curTarget.offsetWidth); 
        var targHeight = parseInt(curTarget.offsetHeight);
        var temp = document.elementFromPoint(event.clientX, event.clientY);

    }


    id = null;
}

这是我的代码的链接:jsfiddle javascript部分必须写在html里面才能正常使用

Answer 1

问题标题具有误导性，您真正遇到问题的似乎是找到目标 div 的坐标。您可以使用 clientX 和 clientY 抓取鼠标坐标，尽管您可能希望使用 pageX 和 pageY 坐标，因为它们是相对于呈现的页面而不是视口(viewport)(即用户正在查看的窗口)。 0,0 使用客户端坐标将随着用户滚动而改变，而页面坐标将引用网页上的特定位置。

至于找到放置的 div，您可以在元素上使用方法 getClientBoundingRect 并使用 top、right、bottom 和 left 属性来确定鼠标的 pageX 和 pageY 坐标是否在内部(或靠近里面)元素。

也许有更好的方法，但我会这样做。

function mouseUp(e){
  var targets = document.getElementsByClassName("drop_here");
  for(var i=0;i<targets.length;i++){
      var bounds = targets[i].getClientBoundingRect();
      var lenience  = 5;
      if(e.pageX < bounds.right + lenience &&
         e.pageX > bounds.left - lenience &&
         e.pageY < bounds.top - lenience &&
         e.pageY > bounds.bottom + lenience){
        //do my work here   
      }
  }
}