HTML5 Drag-Release-OffsetX-OffsetY-Sprung

Question

Ich spiele mit dem HTML5 Drag & Drop und Tracking der Mausposition beim Ziehen.

OffsetX und OffsetY arbeitet genial, bis Sie die Maustaste loslassen, die Offsets auf der letzten Drag-Ereignis auf eine negative Zahl springen geschickt

hier ist der html:

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

hier ist die CSS:

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

und die js

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

Sie können auch http://jsfiddle.net/Eu2mz/5/

testen, auch ich versuche nur, um es jetzt in Webkit zu arbeiten.

Answer 1

Ihr jsfiddle-Link scheint ebenfalls von der Fenstergröße betroffen zu sein. Versuchen Sie es in seinem eigenen Dokument, um die Möglichkeiten einzuschränken?

Answer 2

Sie können ein Drag-Ende-Ereignis hinzufügen, das das Problem lösen soll.
wie folgt aus:

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

Answer 3

Ich weiß nicht, warum, aber beim Ziehen über oder außerhalb des ziehbar Objekt fallen wird die offsetX, offsetY, clientX, bis zu einem gewissen unverständliche Zahl clientY etc Eigenschaften ändern.

Das Update ist zu preventDefault auf dem Dokument Drop-und Dragover-Ereignisse.

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>

Answer 4

Ich hatte das gleiche Problem und kam mit einer Lösung, die 99,99999% der Zeit arbeiten. die Erklärung ist unter:

Lösung

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

Erklärung

ich durch das Ereignis sah zurück (sollte Ihre Benutzer laufen in in jedem Fall arbeiten) mit der Maus auf die Freigabe und an die Veranstaltung im Vergleich unmittelbar davor, und konnte nichts finden, was in 100% der Fälle funktioniert - es gibt keine einfache "ButtonPressed" -Funktion oder ähnliches, die im Objekt versteckt ist.

ich aber, dass ist zu sehen hat jede einzelne Maßnahme der Cursor-Position geändert, wenn Sie loslassen: clientX, layerX, offsetX, pageX, screenX und regelmäßige x/y. Sie alle sind standardmäßig auf den oberen linken Wert gesetzt, der die obere linke Ecke des Fensters oder des Bildschirms sein kann.

Aber wie hoch ist die Wahrscheinlichkeit, dass Ihr Benutzer in den Vollbildmodus wechselt und ein Element in das oberste linke Pixel des Bildschirms zieht?(In Chrome für mich, screenX ist eigentlich auf der linken Seite des Fensters gesetzt, aber screenY berücksichtigt Chrome HUD)

Also während das oben genannte wird nicht funktionieren in diesem 1 Rand Fall (dass Ihre Benutzer wahrscheinlich nie - laufen Sie immer hin, es wird jedes zweite Mal funktionieren.

Getestet in Chrome.