web-dev-qa-db-ja.com

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

グーグルはたくさんありますが、より良い解決策は見つかりませんでした。 JavaScriptを使用せずにこれを解決する方法はありますか？どんな助けでもいただければ幸いです。

ありがとう

javascripthtmldrag-and-dropdraggable
16
Sandeep

これを試してみてください

ondragstart = "returnfalse;"を追加しますあなたの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>
24
isambitd

種類の更新、ソリューションはReactで機能しませんが、以下を追加すると機能します。

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

編集：ondragstartに対してfalseを返すことは、Firefoxの最新バージョン（クレジット：Hooman Askari）では機能しなくなりました。その場合は以下を使用してください。

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

...そして要素について

ondragstart="dragStart(e)"
9
James Morrison

更新 James Morrisonの更新 ：新しいバージョンでさえもう機能していないようです。

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のみ」のソリューションはすべて機能していませんでした。

0
Giampaolo Ferradini