HTML5拖动版本offsetX offsetY跳转 [英] HTML5 Drag Release offsetX offsetY jump

问题描述

OffsetX和OffsetY工作非常棒，直到你释放鼠标，偏移跳转到最后一个拖动事件发送的负数

这里是html：

 < div id =dragger>< / div> 
< div id =console>< / div> 
  

这里是css：

  #dragger {
 -webkit-user-drag：element; 
 width：100px; 
 height：100px; 
背景：hsla（200，100％，50％，0.4）; 
} 
  

和js

bind（'drag'，function（e）{
$（'＃console'）。html（e.originalEvent.offsetX ）;
}）

您还可以在 http://jsfiddle.net/Eu2mz/5/

另外我只是试图让它在webkit中工作。

解决方案

我不知道为什么，但拖着或者删除可拖动对象的外部将更改 offsetX ， offsetY ， clientX ， clientY 等属性到一些无法理解的数字。

修复程序是文档删除和拖动事件 preventDefault 。 p>

  #dragger {width：100px; height：100px;背景：hsla（200，100％，50％，0.4）;}  

 < div draggable =trueid =draggerondragstart =event.dataTransfer.setData（'text / plain'，null）>< / div>< div id =console >< / div>  

I'm playing with the HTML5 drag and drop and tracking the mouse position while dragging.

OffsetX and OffsetY works awesome until you release the mouse, the offsets jump to a negative number on the last drag event dispatched

here's the html:

<div id="dragger"></div>
<div id="console"></div>

here's the css:

#dragger{
    -webkit-user-drag: element;
    width: 100px;
    height: 100px;
    background: hsla(200, 100%, 50%, 0.4);
}​

and the js

$('#dragger').bind('drag', function (e) {
    $('#console').html(e.originalEvent.offsetX);
})​

You can also test out at http://jsfiddle.net/Eu2mz/5/

Also I'm just trying to get it to work in webkit for now.

解决方案

I don't know why but when dragging over or dropping outside of the draggable object will change the offsetX, offsetY, clientX, clientY etc properties to some unintelligible number.

The fix is to preventDefault on the document drop and dragover events.

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>

这篇关于HTML5拖动版本offsetX offsetY跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！