我如何使它在Firefox中拖動圖像時沒有「Ghost」？

當您拖動圖像時，當您按住鼠標時，會有一個半透明的幽靈圖像。我如何使它在Firefox中拖動圖像時沒有「Ghost」？

是否有某種方法可以將CSS/JS應用於特定的部分？

來源

2009-12-03 TIMEX

你想要它做什麼呢？ – 2009-12-03 00:30:14

閱讀答案後，我意識到這個問題很少有解釋。我喜歡直接從FF拖動圖像到文件夾中進行保存。我只是覺得OP只是想用同樣的東西而沒有鬼。：P – 2009-12-03 00:40:59

你可以嘗試使用CSS背景圖像而不是帶有img標籤的實際圖像。

來源

2009-12-03 00:31:16 Tim

恐怕這是瀏覽器的行爲/功能。我不確定任何特定的FF CSS樣式可以處理。

您可能想要修改Firefox的代碼以擁有自己的Firefox。如果您正在尋找一些方法來以非編程方式進行操作，我想您必須以超級用戶身份登錄：P

來源

2009-12-03 00:33:25

在瀏覽器中禁用它的唯一方法（在Safari中執行相同的操作）是元素（或event.preventDefault()）上的onmousedown事件返回false，然後使用javascript處理其餘的拖動操作。

幾乎每個主要的JavaScript庫都支持「拖拽」和「拖拽」。如果您已經在頁面上使用庫，則可以將其代碼用作起始位置，或者直接使用它們。

來源

2009-12-03 00:34:10

about:config中有一個Firefox選項可以關閉 - nglayout.enable_drag_images - 但顯然這隻適用於您。我猜你想要爲所有訪問者移除它？

如果你想做拖動&下拉，也許試試jQuery UI或另一個JS庫？你應該能夠很容易地移動其他元素，並且你可以使用一個背景圖像，像Tim在其中的一個上說的那樣。

另一個優點是你可以使用CSS精靈效果來減少HTTP請求。我用jQuery UI製作了一個jigsaw puzzle，它實際上只有一個圖像，但看起來像幾個。

來源

2009-12-03 00:34:55 DisgruntledGoat

大聲笑爲什麼這個答案在事後8年後被低估了？ – DisgruntledGoat 2017-09-14 14:27:50

您需要從ondragstart事件返回false。我自己也有這個問題，這就是我解決問題的方法。這在IE7中也是一個問題。問題是IE的拖放api，將其標準化爲html5，以及firefox隨後的實現。

其他有關使用JavaScript庫進行拖放的建議將不起作用。（我已經在使用jQuery UI），因爲這是Firefox中最近的事情，而且jQuery UI似乎沒有考慮到它。

來源

2009-12-03 00:39:35 Breton

只需將屬性draggable="false"添加到圖像。另外，添加一個容器div。

E.g.

<div draggable="true"> 
<img draggable="false" src="your/path/to/image.png"/> 
Optional Text 
<div>

此外，添加

function handleDragStart(e) { 
    // other code 
    var dragIcon = document.createElement('img'); 
    dragIcon.src = 'another/image/path.png'; 
    e.dataTransfer.setDragImage(dragIcon, -10, -10); 
    // other code 
}

來源

2012-08-28 08:37:10

如果您需要支持IE 11及更低版本，這不是一個解決方案。 IE不支持setDragImage。 – Phil 2014-09-01 16:06:08

最簡單的方法是設置非常大x和y從屏幕座標setDragImage其離開。例如：

element.addEventListener('dragstart', function(event) { 
    event.dataTransfer.setDragImage(element, -99999, -99999); 
}, false);

您傳遞給setDragImage的實際元素並不重要。爲了方便，我們在這裏使用相同的元素。

來源

2016-02-26 20:43:48 jviotti

這是一個很好的答案...！ – mattdlockyer 2016-06-19 16:36:16

我如何使它在Firefox中拖動圖像時沒有「Ghost」？

回答

相關問題