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

问题描述 投票:12回答:3

我只是尝试将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的解决方案?任何帮助,将不胜感激。

谢谢

javascript html5 drag-and-drop draggable
3个回答
22
投票

试试吧

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

2
投票

更新排序,该解决方案不适用于React,但添加以下内容。

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

编辑:为ondragstart返回false不再适用于更现代版本的Firefox(信用:Hooman Askari),在这种情况下使用下面的内容。

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

......以及元素

ondragstart="dragStart(e)"

-2
投票

您可以为图像设置以下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

© www.soinside.com 2019 - 2024. All rights reserved.