Question

我已经构建了一个javascript应用程序，用于在同一页面中将div从一个地方拖放到另一个地方。我做了拖拽的部分。我有div的坐标，我必须放弃div但是我被困在我应该引入匹配目标区域的div的条件的部分。基本上div可以被放在任何div之上，但是如果在onmouseup事件中我必须接近目标div，它们必须正好落在目标div之上。我正在考虑将我拖动的（onmousdown）div的顶部和左侧属性分配给目标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必须在html中编写javascript部分才能使其正常工作

Answer 1

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

至于找到你的drop 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   
      }
  }
}

如何在onmouseup上获得坐标？

1 个答案: