javascript - HTML5 拖放 offsetX offsetY 跳转

Question

我正在玩 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 中工作。

Answer 1

我不知道为什么，但是当拖动到可拖动对象之外或拖放到可拖动对象之外时，将更改 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>