警报来自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，在 HTML5 拖动事件期间设置屏幕坐标 https://bugzilla.mozilla.org/show_bug.cgi?id=505521#c80。我将引用 jbmj 进行总结，并且我将粗体显示他们引用的原始开发人员......
我简直不敢相信这个评论
"请注意，虽然它没有指定属性应该设置为什么，只是应该设置它们，而我们目前将它们设置为 0。"
11年前的版本仍然是最先进的。
我受到杰伊评论的启发，使用了“drop”事件。但这只是一个评论，所以让我把它整理成一个答案。
我们的问题：dragend事件有e.clientY and e.clientX设置为 0。
我们将如何解决它：document's drop event 也火了与我们拖动的元素同时发生dragend事件。和：drop 将有正确的值e.clientY and e.clientX.
两个工作演示，100% 仅 JavaScript 解决方案：SO代码片段和JSBin https://jsbin.com/hiyabib/edit?html,css,js,console,output。 SO 代码片段控制台有时会吞噬控制台中拖动的元素，而 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()：这绑定到可拖动元素。在这里，我们所做的就是在开始时记录当前的 x/y 坐标。
-
dragOverHandler()：这与文档绑定，以便我们可以覆盖默认的拖动行为。这是进行任何类型的拖放操作所必需的。
-
dragEndHandler(): 这与document's drop。通常，我们希望将其绑定到element's dragend， 但是由于clientY and clientX缺少，我们将其绑定到文档上。这正是您在调用 Dragend 时想要发生的事情，除非您有 x/y 坐标。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
