Html5拖放鼠標在Firefox中的位置

我有一個利用拖放的HTML5應用程序。基本上，用戶可以將圖像從「抽屜」拖到畫布上以創建更大的圖像。我希望元素在他們發佈的地方下降。我有這個工作在除Firefox以外的所有瀏覽器。Html5拖放鼠標在Firefox中的位置

在drop事件上，我使用以下命令獲取鼠標的座標，並計算畫布內放置圖像的位置。

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

問題是，該屬性在FF中不可用。有沒有其他辦法可以得到這個？沒有它，我看不到如何在FF中拖動和移動元素。

注：我沒有使用畫布元素。我正在將圖像放到div上。不知道這是否重要。

來源

2012-11-17 Chris

http://bugs.jquery.com/ticket/8523 –

該錯誤與jQuery無關。我正在使用拖放的HTML5 API。對不起，應該有指定。 – Chris

這比應該更困難。在Firefox中的HTML5拖動過程中獲取鼠標位置 - 您會認爲這將是基本的。 – MSC

在Firefox試試這個..

var X = event.layerX - $(event.target).position().left; 
var Y = event.layerY - $(event.target).position().top;

來源

2012-11-20 10:28:42 Kathiravan

工作。謝謝！ – Chris

有一個快樂的編碼....克里斯 – Kathiravan

我試圖Kathirvans答案以上，但它沒有爲我工作。該魔法藥水爲我的網頁是......

var x = e.originalEvent.pageX - $(this).offset().left; 
var y = e.originalEvent.pageY - $(this).offset().top;

來源

2013-10-12 00:20:03 louisinhongkong

我嘗試使用layerX和layerY但神祕，他們在Chrome中相同的價值觀不同。

然後我意識到在Retina顯示屏上Firefox setDragImage不會把規模考慮進去。
換句話說，調用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-27 11:52:59

Html5拖放鼠標在Firefox中的位置

回答

相關問題