HTML5拖动释放offsetY跳转。-HTML5DragReleaseoffsetXoffsetYjump

0  

your jsfiddle link appears to also be affected by the window size. Try it in it's own doc to narrow possibilities?

您的jsfiddle链接似乎也会受到窗口大小的影响。在自己的doc中尝试一下缩小可能性?

0  

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.

我不知道为什么，但是当拖动到可拖动对象的外部时，会将offsetX、offsetY、clientX、clientY等属性更改为一些难以理解的数字。

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);
}

0  

I had the same problem and came up with a solution that will work 99.99999% of the time. the explanation is below:

我遇到了同样的问题，想出了一个解决方案，它可以达到99.99999%的时间。下面的解释是:

eng.window.addEventListener(
    "drag"
    ,function(event){
        //If both screenX and screenY are 0, likely the user just released.
        if(!event.screenX && !event.screenY) return;

        //Your code here
    }
);

I looked through the event returned on releasing the mouse and compared it to the event immediately before, and couldn't find anything that will work in 100% of the cases- there's no easy "buttonPressed" feature or the like hidden inside the object.

我查看了一下发布的事件，并将它与之前的事件进行了比较，并且在100%的情况下都找不到任何可以工作的东西——没有简单的“buttonPressed”功能或者隐藏在对象内部的东西。

I did see though that every single measure of cursor position is changed when you release: clientX, layerX, offsetX, pageX, screenX, and regular x/y. They all default to the top-left value possible, which may be the top-left corner of the window- or the screen.

我确实看到了，当您发布时，每个指针位置的度量都发生了变化:clientX、layerX、offsetX、pageX、screenX和regular x/y。它们都默认为左上角的值，这可能是窗口的左上角或屏幕的左上角。

But what is the likelihood that your user will go into fullscreen mode drag and drop an element into the very top-left pixel of their screen? (In Chrome for me, screenX is actually set to the left edge of the window; but screenY takes Chrome's HUD into account)

但是你的用户进入全屏模式拖拽一个元素到屏幕左上角的可能性有多大呢?(在Chrome中，screenX实际上是设置在窗口的左边缘;但是screenY把Chrome的HUD考虑进去了)

So while the above won't work in that 1 fringe case (that your users will likely never-ever run into), it will work every other time.

因此，虽然上面的内容不会在一个附带的情况下工作(用户可能从未遇到过)，但它会在每隔一段时间运行。

Tested in Chrome.

在Chrome进行测试。

-1  

You can add drag end event it should solve the problem.
like this:

您可以添加拖尾事件，它应该可以解决这个问题。是这样的:

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