HTML5ドラッグリリースoffsetXオフセットYジャンプ

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

あなたのjsfiddleリンクは、ウィンドウサイズの影響を受けるようです。可能性を絞り込むためにそれを自分の文書に入れてみてください。

Answer 2

ドラッグエンドイベントを追加すると問題を解決できます。このような
：

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

Answer 3

は、私はなぜ知らないが、ときオーバードラッグするか、ドラッグ可能なオブジェクトの外側をドロップすると、いくつか理解不能番号にoffsetX、offsetY、clientX、clientYなどのプロパティを変更します。

ドキュメントドロップとdragoverイベントの修正点は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>

Answer 4

私は同じ問題を抱えていたし、時間の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 
    } 
); 

説明

は、マウスを解放に戻り、イベントにそれを比較します直前に、100％のケースで動作するものを見つけることができませんでした。オブジェクトの中に隠された簡単な「buttonPressed」機能などはありません。

私はそれにもかかわらずカーソル位置の一つ一つの尺度は、あなたがリリース時に変更されて見ました：clientX、layerX、offsetX、pageX、screenX、および定期的なx/y。これらはすべて、ウィンドウまたは画面の左上隅の可能性がある左上の値にデフォルト設定されています。

しかし、ユーザーがフルスクリーンモードに移行して、要素を画面の左上のピクセルにドラッグアンドドロップする可能性はありますか？（私にとってはChromeでは実際にはウィンドウの左端にscreenXが設定されていますが、screenYはChromeのHUDを考慮に入れます）

これは1フリンジケースでは機能しません - それを実行すると）、それは隔時に動作します。

Chromeでテスト済みです。