HTML5 draggable = 'false' не работает в браузере 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

Google много, но не нашел лучшего решения. Есть ли решение для этого без использования JavaScript? Любая помощь будет оценена по достоинству.

Спасибо

Ответы

Ответ 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>

Ответ 2

Обновление своего рода, решение не работает с React, однако добавление ниже делает.

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

РЕДАКТИРОВАТЬ: возвращение false для ondragstart больше не работает для более современных версий Firefox (кредит: Hooman Askari), в этом случае используйте ниже.

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

... и на элементе

ondragstart="dragStart(e)"

Ответ 3

Лучшее решение, которое я нашел, - ограничить свойство style для элемента или элемента textarea с помощью css...

элемент:

<textarea id="myTextArea" style="resize: none" type="text" title=""></textarea>

или же

css: это, конечно, повлияет на все элементы textarea

textarea {
    resize: none;
}

Кредит этим людям.

https://www.tutorialrepublic.com/faq/how-to-disable-resizable-property-of-textarea-using-css.php

Ответ 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