如何获得onmouseup的坐标？

我已经构建了一个JavaScript应用程序，用于在同一页面中将div从一个地方拖放到另一个地方。我做了拖动部分。我有div的坐标，我必须放弃div，但我被卡在应该引入匹配目标区域的div的条件的部分。基本上divs可以放在任何div上面，但是如果在onmouseup事件中，我在任何接近该目标div的地方，它们必须正好落在目标div上面。我想分配我的拖动（onmousdown）div的顶部和左侧属性到目标股利但我可能是错误的..请指导我通过这部分。这里是一部分，我需要帮助：如何获得onmouseup的坐标？

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里面写，使其正常工作

来源

2017-08-04 Del Monte

的问题的标题有误导之嫌，你真的似乎遇到的问题是找到目标div的坐标。尽管您可能想要使用pageX和pageY坐标，因为它们相对于呈现的页面而不是视口（即用户正在查看的窗口），所以抓取的鼠标坐标很好。 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 
     } 
    } 
}

来源

2017-08-04 16:58:46 Don

你能更新我的jsfiddle链接吗？感谢您的答案btw .. –

我会在我的答案写一个例子，不会写入你的代码，但你。 – Don

当然..一个例子就足够了:) –

如何获得onmouseup的坐标？

回答

相关问题