我正在玩 HTML5 拖放并在拖动时跟踪鼠标位置。
OffsetX 和 OffsetY 工作得很好,直到你松开鼠标,偏移量在最后一次调度的拖动事件中跳转到负数
这是 html:
<div id="dragger"></div>
<div id="console"></div>
这是CSS:
#dragger{
-webkit-user-drag: element;
width: 100px;
height: 100px;
background: hsla(200, 100%, 50%, 0.4);
}
和js
$('#dragger').bind('drag', function (e) {
$('#console').html(e.originalEvent.offsetX);
})
您也可以在 http://jsfiddle.net/Eu2mz/5/ 进行测试
另外,我现在只是想让它在 webkit 中工作。
最佳答案
我不知道为什么,但是当拖动到可拖动对象之外或拖放到可拖动对象之外时,将更改 offsetX
、offsetY
、clientX
, clientY
等一些难以理解的数字的属性。
解决方法是在文档放置和拖动事件上preventDefault
。
document.addEventListener("drag", function( event ) {
var element = document.getElementById('console');
element.textContent = event.clientX;
}, false);
document.addEventListener("dragover", function( event ) {
event.preventDefault();
}, false);
document.addEventListener("drop", function( event ) {
event.preventDefault();
}, false);
#dragger{
width: 100px;
height: 100px;
background: hsla(200, 100%, 50%, 0.4);
}
<div draggable="true" id="dragger" ondragstart="event.dataTransfer.setData('text/plain',null)"></div>
<div id="console"></div>
关于javascript - HTML5 拖放 offsetX offsetY 跳转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12128216/