dragend发出的警报将mouseX显示为零，无论当前在何处。这在Chrome中可以正常工作，因此不确定我在做什么错。
function move(e,obj,but){
if(typeof(obj) === 'string'){
obj = document.getElementById(obj) ;
}
if(typeof(but) === 'string'){
but = document.getElementById(but) ;
}
//elementCoord(but) ;//get the current coords of the button &
elementCoord(obj) ;//the container
e = e || window.event ;
var mouseX = e.clientX ;
var mouseY = e.clientY ;
//alert('mouseX='+mouseX+', but.XCoord '+but.XCoord) ;
var diffX = Math.abs(obj.XCoord - mouseX) ;
var diffY = Math.abs(obj.YCoord - mouseY) ;
but.addEventListener("dragend",function(evt){
evt = evt || window.event ;
mouseX = evt.clientX ;
mouseY = evt.clientY ;
obj.style.left = mouseX - diffX + 'px';
obj.style.top = mouseY - diffY + 'px';
alert('mouseX='+mouseX+' diffX='+diffX) ;
}
,false) ;
}
elementCoord只是获得对象的偏移量，将其添加为属性。在所有浏览器中都可以正常工作。 最佳答案
这是Firefox的正式问题-Bugzilla: Bug #505521, Set screen coordinates during HTML5 drag event。我将引用jbmj进行总结，并且将他们引用的原始开发人员加粗...
周杰伦的评论启发了我使用“drop”事件。但这只是评论，所以让我将其脱颖而出作为答案。
我们的问题:dragend事件的e.clientY和e.clientX设置为0。
我们将如何解决它:document的drop事件也会在与我们拖动的dragend事件的元素相同的确切时间触发。并且:drop 将具有e.clientY和e.clientX的正确值。
两个有效的演示，100％仅JavaScript解决方案:SO代码段和JSBin。 SO Code Snippet控制台有时会吞噬控制台中被拖动的元素，而JSBin给了我更一致的结果。
var startx = 0;
var starty = 0;
dragStartHandler = function(e) {
startx = e.clientX;
starty = e.clientY;
}
dragOverHandler = function(e) {
e.preventDefault();
return false;
}
dragEndHandler = function(e) {
if(!startx || !starty) {
return false;
}
var diffx = e.clientX - startx;
var diffy = e.clientY - starty;
var rect = e.target.getBoundingClientRect();
var offset = {
top: rect.top + window.scrollY,
left: rect.left + window.scrollX,
};
var newleft = offset.left + diffx;
var newtop = offset.top + diffy;
e.target.style.position = 'absolute';
e.target.style.left = newleft + 'px';
e.target.style.top = newtop + 'px';
startx = 0;
starty = 0;
}
document.getElementsByClassName("draggable")[0].addEventListener('dragstart', dragStartHandler);
document.addEventListener('dragover', dragOverHandler);
document.addEventListener('drop', dragEndHandler);.draggable {
border: 1px solid black;
cursor: move;
width:250px;
};<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<BR><BR><BR>
<div id="draggable1" class="draggable" draggable="true">
Hey, try to drag this element!
</div>
</body>
</html>说明:
dragStartHandler():这绑定(bind)到可拖动元素。在这里，我们要做的就是在开始时记录当前的x/y坐标。 dragOverHandler():这是绑定(bind)到文档的，因此我们可以覆盖默认的拖动行为。进行任何类型的拖放都需要这样做。 dragEndHandler():这绑定(bind)到document的drop。通常，我们希望将其绑定(bind)到element的dragend，但是由于缺少clientY和clientX，我们将其绑定(bind)到文档。这恰好满足了在调用dragend时想要发生的事情，除了您有x/y坐标。