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>

Jsfiddle

我正在使用Firefox最新版本：32.0.3

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

由于

Answer 1

试试这个

添加ondragstart =＆＃34;返回false;＆＃34;到您的HTML元素

＆＃13;

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

＆＃13;

Answer 2

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

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

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

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

...以及元素上

ondragstart="dragStart(e)"

Answer 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”解决方案均无效。

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 code：

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

Fiddle

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

4 个答案: