web-dev-qa-db-ja.com

JSを使用せずに画像をドラッグまたは選択できないようにする

Javascriptに頼らずに、Firefoxで画像をドラッグ不可かつ選択不可にする方法を知っている人はいますか？些細なことのようですが、問題は次のとおりです。

1）Firefoxでドラッグして強調表示できます。

<img src="...">

2）これを追加しますが、ドラッグ中に画像を強調表示できます：

<img src="..." draggable="false">

3）これを追加して、強調表示の問題を修正しますが、直感に反して、画像が再びドラッグ可能になります。奇妙なことはわかっています！ FF 16.0.1を使用する

<img src="..." draggable="false" style="-moz-user-select: none;">

だから、「-moz-user-select：none」を追加する理由を誰かが知っていますか？「draggable = false」を切り捨てて無効にしますか？もちろん、webkitは期待どおりに機能します。 Interwebsにはこれについては何もありません...一緒にこれに何らかの光を当てることができれば素晴らしいと思います。

ありがとう!!

編集：これは、UI要素が誤ってドラッグされないようにし、使いやすさを向上させることに関するものです-コピー保護スキームの不完全な試みではありません：-）

htmlcsshtml5firefoxdraggable
114
tmkly3

次のCSSプロパティを画像に設定します。

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
173
Jeff Wooden

ソリューションを共有するのを忘れていましたが、JSを使用せずにこれを行う方法を見つけることができませんでした。 @Jeffery A Woodenが提案したCSSがカバーしないコーナーケースがいくつかあります。

これはすべてのUIコンテナに適用されるもので、すべての子要素で再利用されるため、各要素に適用する必要はありません。

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

JS：

var makeUnselectable = function( $target ) {
    $target
        .addClass( 'unselectable' ) // All these attributes are inheritable
        .attr( 'unselectable', 'on' ) // For IE9 - This property is not inherited, needs to be placed onto everything
        .attr( 'draggable', 'false' ) // For moz and webkit, although Firefox 16 ignores this when -moz-user-select: none; is set, it's like these properties are mutually exclusive, seems to be a bug.
        .on( 'dragstart', function() { return false; } );  // Needed since Firefox 16 seems to ingore the 'draggable' attribute we just applied above when '-moz-user-select: none' is applied to the CSS 

    $target // Apply non-inheritable properties to the child elements
        .find( '*' )
        .attr( 'draggable', 'false' )
        .attr( 'unselectable', 'on' ); 
};

これは必要以上に複雑でした。

54
tmkly3

CSSでpointer-eventsプロパティを使用し、「none」に設定できます。

img {
    pointer-events: none;
}

編集済み

これにより、イベントがブロック（クリック）されます。より良い解決策は

<img draggable="false" (dragstart)="false;" class="unselectable">

.unselectable {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
32
Linh Dam

状況に応じて、CSSを使用して画像をdivの背景画像にすることはしばしば役立ちます。

<div id='my-image'></div>

次に、CSSで：

#my-image {
    background-image: url('/img/foo.png');
    width: ???px;
    height: ???px;
}

ボタンと異なるサイズ設定オプションを使用した実際の例については、この JSFiddle を参照してください。

12
Nick Merrill

おそらくただ頼ることができます

<img src="..." style="pointer-events: none;">
9
Thomas Bachem

画像を背景画像として設定できます。 divに存在し、divはドラッグできないため、イメージはドラッグできません。

<div style="background-image: url("image.jpg");">
</div>
1
joshua pogi 28

特にWindows Edgeブラウザ用の一般的なソリューション（-ms-user-select：none; CSSルールは機能しません）：

window.ondragstart = function（）{falseを返す}

注：これにより、クリックイベントがまだ必要な場合（つまり、pointer-events = noneを使用できない場合）に、すべてのimgタグにdraggable = falseを追加する必要がなくなりますが、ドラッグアイコンイメージは表示されません。

0
Philip Murphy

divイメージと同じサイズを持ち、配置されるイメージの上要素を作成しました。その後、マウスイベントは画像要素に移動しません。

0
User