問題描述
來自 dragend 的警報將?? mouseX 顯示為零，無論它當前在哪里.這在 Chrome 中運行良好，所以不確定我做錯了什么.
The alert from dragend is showing mouseX as zero no matter where it is currently. This works fine in Chrome so not sure what I'm doing wrong.
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 只是獲取對象的偏移量，將其添加為屬性.它適用于所有瀏覽器.
Forgot to mention, elementCoord just gets the offset of an object adding it as a property. It works fine in all browsers.
推薦答案
這是 Firefox 的官方問題 -- Bugzilla:錯誤 #505521，在 HTML5 拖動事件期間設置屏幕坐標.我會引用 jbmj 來總結一下，我會加粗他們引用的原始開發人員...
This is officially an issue with Firefox -- Bugzilla: Bug #505521, Set screen coordinates during HTML5 drag event. I'll quote jbmj to summarize, and I will bold the original developer they are quoting...
我不敢相信這個評論
"請注意，雖然它沒有指定屬性應該設置為什么，只是應該設置它們，而我們目前將它們設置為 0."
從 11 年前開始，它仍然是最先進的.
I can't believe that this comment
"Note though that it doesn't specify what the properties should be set to, just that they should be set and we currently set them to 0."
from 11years ago is still state of the art.
Jay 的評論啟發了我，我使用了drop"；事件.但這只是一個評論，所以讓我把它打造成一個答案.
I was inspired by Jay's comment, to use the "drop" event. But that was only a comment, so let me thresh it out into an answer.
我們的問題:dragend 事件將 e.clientY 和 e.clientX 設置為 0.
Our problem: dragend event has e.clientY and e.clientX set to 0.
我們將如何解決它:document 的 drop 事件 也觸發 與我們拖動的元素的 dragend 事件.并且:drop 將具有正確的 e.clientY 和 e.clientX 值.
How we will solve it: document's drop event also fires at the same exact time as the element we are dragging's dragend event. And: drop will have the correct values for e.clientY and e.clientX.
兩個工作演示，100% 僅 JavaScript 的解決方案:SO 代碼片段和 JSBin.SO Code Snippet 控制臺有時會吞噬控制臺中拖動的元素，而 JSBin 給了我更一致的結果.
Two working demos, 100% JavaScript-Only Solution: SO Code Snippet and JSBin. The SO Code Snippet console sometimes gobbles up the dragged element in the console, and JSBin gave me more consistent results.
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的drop.通常，我們希望 this 綁定到element的dragend，但由于缺少clientY和clientX，我們將它綁定到文檔.這正是您在調用 dragend 時想要發生的事情，除非您有 x/y 坐標.
dragStartHandler(): This is bound to the draggable element. Here, all we do is record the current x/y coordinates at start.dragOverHandler(): This is bound to the document, so that we can override the default dragover behavior. This is needed to do any type of drag & dropping.dragEndHandler(): This is bound to thedocument'sdrop. Normally, we would want this to bind to theelement'sdragend, but sinceclientYandclientXare missing, we bind it to the document. This just does exactly what you'd want to happen when dragend is called, except you have x/y coordinates.
這篇關于為什么 event.clientX 在 firefox 中為 dragend 事件錯誤地顯示為 0?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！