9

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で動作させようとしています。

4

5 に答える 5

2

理由はわかりませんが、ドラッグ可能なオブジェクトの外にドラッグまたはドロップすると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>

于 2015-09-09T17:44:02.530 に答える
0

あなたのjsfiddleリンクもウィンドウサイズの影響を受けているようです。可能性を狭めるために独自のドキュメントで試してみませんか？

于 2012-08-27T04:38:53.867 に答える
-1

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

$('#dragger').bind('dragend', function (e) {
     $('#console').html(e.originalEvent.offsetX);
})
于 2012-08-27T19:47:59.220 に答える