HTML5 draggable='false' 在 Firefox 浏览器中不起作用答案

【问题标题】：HTML5 draggable='false' not working in Firefox browserHTML5 draggable='false' 在 Firefox 浏览器中不起作用
【发布时间】：2014-12-09 00:21:21
【问题描述】：

我只是尝试将 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

Google 了很多，但没有找到更好的解决方案。有没有不使用 JavaScript 的解决方案？任何帮助，将不胜感激。

谢谢

【问题讨论】：

不幸的是，即使是编写标准的人也无法理解直接逻辑，而是使用隐含逻辑。所以它被错误地设计为 existential 布尔值，not 布尔值。不管属性是否存在，它都被认为是真的。这意味着 draggable="true" （而不是 draggable="draggable" 在技术上根据定义是正确的，尽管很多人反对，因为正确解释的语言是数学的过度简化版本。简而言之：如果你不想要属性的效果干脆不加属性.
@John 这不是可拖动属性。它不是布尔属性，并且 draggable="false" 不是真的。默认情况下，链接和图像是可拖动的，并且需要 draggable="false" 才能中断该行为。

标签： javascript html drag-and-drop draggable

【解决方案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>

【讨论】：

这不再起作用，请参阅 James Morrison 的回答。

【解决方案2】：

各种更新，解决方案不适用于 React，但添加以下内容。

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

编辑：ondragstart 返回 false 不再适用于更现代的 Firefox 版本（来源：Hooman Askari），在这种情况下，请使用以下内容。

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

...在元素上

ondragstart="dragStart(e)"

【讨论】：

您的更新在 React 中对我不起作用，但确实如此（远没有@Giampaolo Ferradini 对您的答案的更新复杂）：关于元素使用：onDragStart={dragStart}
在我的 <a> 元素上添加了 onDragStart={(e) => e.preventDefault()} 并且它有效！谢谢！

【解决方案3】：

James Morrison's update 的更新：即使是较新的版本似乎也不再起作用了。

我可以通过检查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”解决方案均无效。

【讨论】：

【解决方案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">

Fiddle

【讨论】：

按照建议的 CSS 应用，但仍然可以拖动。查看更新的jsfiddle
@Sandeep：您必须为图像添加类。查看更新的答案。
你检查我更新的 Jsfiddle 代码了吗？请看那个。已添加但仍无法使用。
该类已经添加，现在您又添加了一次。