HTML5 draggable='false' 在 Firefox 瀏覽器中不起作用

Question

我只是嘗試將 HTML5 draggable='false' 屬性應用於某些圖像，但它在 Firefox 瀏覽器中不起作用。 在 Chrome 中工作正常，但在 Firefox 上，選擇該圖像后可以拖放。 示例代碼可以在這里看到：

<div id="dnd">
    <textarea placeholder="drop here"></textarea>
    <img src="http://johnlewis.scene7.com/is/image/JohnLewis/231108668?$prod_main$" draggable='false'/>
</div>

提琴手

我使用的是 Firefox 最新版本：32.0.3

谷歌了很多，但沒有找到更好的解決方案。 有沒有不使用 JavaScript 的解決方案？ 任何幫助，將不勝感激。

謝謝

Answer 1

試試這個

添加 ondragstart="返回假；" 到您的 html 元素

 <div id="dnd"> <textarea placeholder="drop here"></textarea> <img src="http://johnlewis.scene7.com/is/image/JohnLewis/231108668?$prod_main$" draggable='false' ondragstart="return false;"/> </div>

Answer 2

各種更新，該解決方案不適用於 React，但是添加以下內容可以。

onDragStart={(e) => { e.preventDefault() }}

編輯：為 ondragstart 返回 false 不再適用於更現代的 Firefox 版本（信用：Hooman Askari），在這種情況下使用以下。

function dragStart(e) {
    e.preventDefault()
}

...在元素上

ondragstart="dragStart(e)"

Answer 3

James Morrison 的更新更新：即使是較新的版本似乎也不再適用。

我可以通過在addEventListener("dragstart",...)進行檢查來解決類似的問題，如果您正在玩拖放，您可能需要設置它。 就我而言：

document.addEventListener("dragstart", function( event ) {
    if (event.target.parentNode.localName == 'li') {
      // console.log("In case it's inside a <li> element, prevent the drag");
      event.preventDefault();
    } else {
      // code taken from a Mozilla example, replace with what you need:
      // store a ref. on the dragged elem
      dragged = event.target;
      // make it half transparent
      event.target.style.opacity = .5;
    }
}, false);

要檢查<img> ，檢查看起來像if (event.target.localName == 'img') {...

根據 OP 請求：我嘗試過的所有“僅 html”解決方案都不起作用。

Answer 4

您可以為圖像設置以下 CSS 屬性：

.unselectable {
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

HTML代碼：

<img src="something.jpg" class="unselectable">

小提琴