5

ドラッグアンドドロップを利用するHTML5アプリケーションがあります。基本的に、ユーザーは「引き出し」からキャンバスに画像をドラッグして、より大きな画像を作成できます。解放された場所に要素を落としたい。私はこれをFirefoxを除くすべてのブラウザで動作させています。

イベントではdrop、以下を使用してマウスの座標を取得し、キャンバス内にドロップされた画像の位置を計算します。

var top = evt.originalEvent.offsetX;
var left = evt.originalEvent.offsetY;

問題は、このプロパティはFFでは使用できないことです。これを取得する他の方法はありますか？それがないと、FF内で要素をドラッグして移動する方法がわかりません。

注：私はcanvas要素を使用していません。画像をdivにドロップしています。それが重要かどうかわからない。

4

3 に答える 3

8

Firefoxでこれを試してください。

var X = event.layerX - $(event.target).position().left;
var Y = event.layerY - $(event.target).position().top;
于 2012-11-20T10:28:42.130 に答える
4

使っlayerXてみlayerYましたが、不思議なことにChromeの同じ値とは違いました。

次に、Retinaディスプレイでは、FirefoxsetDragImageがスケールを考慮しないことに気付きました。
つまり、呼び出すsetDragImage(div, 10, 10)とカーソルが5px; 5pxポイントに配置されます。

ばかげていますね。

var originalEvent = e.originalEvent,
  offsetX = originalEvent.offsetX,
  offsetY = originalEvent.offsetY;

if (_.isUndefined(offsetX) || _.isUndefined(offsetY)) {
  // Firefox doesn't take scale into account so we need to compensate for it
  offsetX = originalEvent.layerX * (window.devicePixelRatio || 1);
  offsetY = originalEvent.layerY * (window.devicePixelRatio || 1);
}

originalEvent.dataTransfer.setDragImage(el, offsetX, offsetY);
于 2013-12-27T11:52:59.780 に答える
0

上記のKathirvansの回答を試しましたが、うまくいきませんでした。私のページの魔法のポーションは...

var x = e.originalEvent.pageX - $(this).offset().left;
var y = e.originalEvent.pageY - $(this).offset().top;
于 2013-10-12T00:20:03.500 に答える