HTML5的draggable='false'在Firefox浏览器中无效

Question

我只是想在一些图像上应用HTML5的draggable ='false'属性，但在Firefox浏览器中不起作用。 在Chrome上运行得很好，但在Firefox上，在选择了该图像之后仍然能够拖放。 可以在此处查看示例代码：

我试图将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>

Jsfiddle

我使用的是Firefox浏览器，最新版本为32.0.3。

我搜索了很多，但没有找到更好的解决方案。有没有不使用JavaScript的解决方法？非常感谢您的帮助。

谢谢。

- Sandeep

---

不幸的是，即使是书写标准的人也没有理解“直接逻辑”，而是使用了“隐含逻辑”。因此它错误地被视为一个存在的布尔值，而不是一个布尔值。无论属性的值如何，如果存在该属性，则认为它为真。这意味着 draggable="true"（而不是 draggable="draggable"）在定义上是技术上正确的，尽管很多人认为这是错误的，因为语言在正确解释时是数学的过度简化版本。简而言之：如果您不想要属性的效果，请勿添加该属性。 - John

@John，这并不适用于 draggable 属性。它不是一个布尔属性，draggable="false" 不是真值。链接和图片默认情况下是可拖动的，需要使用 draggable="false" 来中断这种行为。 - stephband

奇怪的是，在Firefox/Mac OS上，draggable="false"按预期工作，但在Firefox/Windows上却不行。 - maxime schoeni

Answer 1

只需尝试这个。

将 ondragstart="return false;" 添加到您的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>

- isambitd

---

这个已经不再适用了，请查看James Morrison的回答。 - Hooman Askari

Answer 2

有所更新，这个解决方案在React中不起作用，但是添加以下内容可以解决。

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

编辑：对于更现代的Firefox版本，返回false来阻止ondragstart事件不再有效（感谢Hooman Askari），此时请使用以下方法。

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

......并且在元素上

ondragstart="dragStart(e)"

- James Morrison

---

你在React中的更新对我没起作用，但是这个方法可以（比@Giampaolo Ferradini的答案更新方法简单多了）：在元素上使用：onDragStart={dragStart}。 - William Park

在我的<a>元素上添加了onDragStart={(e) => e.preventDefault()}，现在它可以正常工作了！谢谢！ - Quentin D

Answer 3

詹姆斯·莫里森的更新已经更新，但新版本似乎也无法正常工作。

如果您正在使用拖放功能，可能需要在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”解决方案都不起作用。

- Giampaolo Ferradini

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">

小提琴

- Shoaib Chikate

---

应用了建议的CSS，但仍然可以拖动。请参见更新的jsfiddle。 - Sandeep

@Sandeep：你需要给图片添加类。请查看更新后的答案。 - Shoaib Chikate

你有没有检查我的更新后的Jsfiddle代码？请看一下。已经添加了但仍然不起作用。 - Sandeep

那个类已经被添加了，现在你又添加了一次。 - Sandeep