HTMLページからの画像のドラッグを無効にする

194

ページに画像を配置する必要があります。その画像のドラッグを無効にしたいのですが。私はたくさんのことを試みていますが、助けはありません。誰かが私を助けてくれますか？

画像のサイズを変更しているので、その画像を背景画像として保持したくない。

— ユーザー1034
ソース

15

@AgentConundrum-ユーザーが保存して好きなように実行しても問題ありません。私の唯一の要件は、その画像をドラッグしないことです。

— ユーザー1034

261

あなたはこれを好きになることができます...

document.getElementById('my-image').ondragstart = function() { return false; };

それが機能している（または機能していない）

jQueryを使用しているようです。

$('img').on('dragstart', function(event) { event.preventDefault(); });

— アレックス
ソース

9

@alex-画像をドラッグしない目的は、画像を盗むことではありません。目的はまったく異なります。私はその画像をソート可能およびドロップ可能にしています。そのため、説明に時間がかかります。

— ユーザー1034

2

@alex-ondragstartはブラウザに依存しませんか？

— ユーザー1034

1

@AdamMerrifield $(document)代わりに試す$(window)

— rybo111

2

：私はちょうどあなたがjQueryのに簡素化することができます働いた$('img').on('dragstart', false);

— rybo111

2

@alex Under handler：The value false is also allowed as a shorthand for a function that simply does return false.

— Adam Merrifield

174

CSSのみのソリューション：使用 pointer-events: none

https://developer.mozilla.org/en-US/docs/CSS/pointer-events

— ミファン
ソース

3

しかし、これは少なくともFFの奇妙な選択効果につながります。まだfalseを返す方が良いでしょう。

— Bhumi Singhal 2013

画像をリンクとして使用する場合は使用されません。

— Nilesh patel 2013年

3

これはIE（すべてのバージョン）では機能しないようです。caniuse.com

— Justin Tanner

8

また、CSSのみのソリューション：の上に要素を配置しimgます。

— アレックス、2013

6

-1！これは、すべてのポンターイベント（画像をアップロードするときなどのドラッグを含む）を防ぐために使用する必要があります。JavaScriptソリューションを使用しないでください！

— Denys Vitali

129

draggable = "false"をイメージタグに追加するだけです。

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

ただし、IE8以前はサポートしていません。

— dmo
ソース

私はMagentoを使用しているので、<div class = "product-img-box"> <？php echo $ this-> getChildHtml（ 'media'）？> </ div>右クリックとドラッグ不可を制限するにはどうすればよいですか私の画像部。@dmo

— Gem

41

window.ondragstart = function() { return false; }

— ベン
ソース

4

+1反対票を理解しないでください。これは究極のソリューションではありませんが、特別な画像だけでなく、すべてのドラッグを防ぎます。しかし、それは正しい方向を示しています（そして私はそれがそれを行う最初の答えだったと思います）

— Dr.Molle

@DrMolle Steveが私の回答に残した（削除されたため）コメントへの応答であった可能性があります。

— アレックス

2

リンクがブックマークバーにドラッグされる場合があることに注意してください。このソリューションでは、この機能が削除されます。

— jClark

33

最も単純なクロスブラウザーソリューションは

<img draggable="false" ondragstart="return false;" src="..." />

の問題

img {
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-user-drag: none;
 user-drag: none;
 -webkit-touch-callout: none;
}

それはFirefoxで動作していないということです

— イマルハサランガペレラ
ソース

25

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

私のウェブサイトhttp://www.namdevmatrimony.in/で使用しました。魔法のように動作します !!! :)

— ナムデヴ・マトリモニー
ソース

6

Firefoxでドラッグ可能

— Dean Christian Armada

24

私は自分で試したところ、これが機能していることがわかりました。

$("img").mousedown(function(){
    return false;
});

これにより、すべての画像のドラッグが無効になると確信しています。それが他の何かに影響を与えるかわかりません。

— ユーザー1034
ソース

3

ああ！あなたはjQueryを使用していた/ jQueryを使用できたと述べたはずです。jQueryを使用するための+1。

— Alex

@alex-すみません。私は自分で試してみました。そして、それが他の何かに影響するかどうかはわかりません。

— ユーザー1034

あなたは大丈夫です！いいえ、私が知る限り、あなたがここで行っていることを実行しても、他のことに悪影響を与えるべきではありません。

— Alex

2

画像が<a>タグで囲まれている場合はどうなりますか？次に、ユーザーが画像をクリックしても、リンクはクリックされません。

— SeinopSys 2013年

ありがとう。ところで、これはGWTでも `event.preventDefault（）;`を使って機能します。

— Johanna

14

この回答を参照してください。ChromeとSafariでは、次のスタイルを使用してデフォルトのドラッグを無効にできます。

-webkit-user-drag: auto | element | none;

あなたはFirefoxとIE（10+）のユーザー選択を試すことができます：

-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element

— ムフ
ソース

11

（imgタグ内で）ドラッグしたくない各画像に以下を追加できます。

onmousedown="return false;"

例えば

img src="Koala.jpg" onmousedown="return false;"

— BOBO
ソース

10

このコードはまさにあなたが望むことをします。イベントに依存する他のアクションを許可しながら、画像がドラッグされるのを防ぎます。

$("img").mousedown(function(e){
    e.preventDefault()
});

— ロバート
ソース

9

これを直接使用：ondragstart="return false;"イメージタグで。

<img src="http://image-example.png" ondragstart="return false;"/>

<div>タグでラップされた複数の画像がある場合：

<div ondragstart="return false;">
   <img src="image1.png"/>
   <img scr="image2.png"/>
</div>

すべての主要なブラウザで動作します。

— ヤン
ソース

8

私の画像はajaxを使用して作成されているため、windows.loadでは使用できません。

$("#page").delegate('img', 'dragstart', function (event) { event.preventDefault(); });

このようにして、どのセクションが動作をブロックするかを制御できます。これは、1つのイベントバインディングのみを使用し、何もしなくても将来のajaxで作成されたイメージに対して機能します。

jQueryの新しいonバインディング：

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); }); （@ialphanに感謝）

— グザート
ソース

1

.onを使用すると、次のようになります。$（document）.on（ 'dragstart'、 'img'、function（e）{e.preventDefault（）;}）;

— 12

これが正しい解決策です。img現在または将来の無制限の要素に対する1つのイベントバインディング。負荷が最も少なく、最も堅牢です。

— クマの友達

5

<img draggable="false" src="images/testimg1.jpg" alt=""/>

— ムスタファ
ソース

4

素晴らしい解決策、競合に関する小さな問題が1つありました。他の誰かが他のjsライブラリと競合している場合は、そのような競合を有効にしないでください。

var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) { event.preventDefault(); });

これが誰かを助けることを願っています。

— ポール
ソース

3

ここでの回答がすべての人に役立つかどうかはわかりませんが、HTMLページのテキストのドラッグと選択を無効にするのに役立つ簡単なインラインCSSトリックを以下に示します。

あなたの上の<body>タグの追加ondragstart="return false"。これにより、画像のドラッグが無効になります。ただし、テキスト選択を無効にする場合は、を追加しonselectstart="return false"ます。

コードは次のようになります。 <body ondragstart="return false" onselectstart="return false">

— アビセクダス
ソース

3

あなたは私の解決策を最もよく考えるかもしれません。ondragstartイベントと同様にe.preventDefault（）もサポートされないため、ほとんどの回答はIE8などの古いブラウザと互換性がありません。ブラウザー間で互換性を保つには、この画像のmousemoveイベントをブロックする必要があります。以下の例をご覧ください。

jQuery

$("#my_image").mousemove( function(e) { return false } ); // fix for IE
$("#my_image").attr("draggable", false); // disable dragging from attribute

jQueryなし

var my_image = document.getElementById("my_image");
my_image.setAttribute("draggable", false);

if (my_image.addEventListener) {
   my_image.addEventListener("mousemove", function(e) { return false });
} else if (my_image.attachEvent) {
   my_image.attachEvent("onmousemove", function(e) { return false });
}

IE8でもテストおよび機能

— CodeGems
ソース

3

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

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

— Omid Farvid
ソース

1

Firefox（Mac Firefox 69を使用）では機能しないようです

— Ben Wheeler

2

まあ、これは可能であり、投稿された他の回答は完全に有効ですが、ブルートフォースアプローチを採用して、mousedown画像のデフォルトの動作を防ぐことができます。これは、画像のドラッグを開始することです。

このようなもの：

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { return false; };
    }  
};

— アレックス
ソース

2

document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
     e.preventDefault();
});

このPlunkerで動作しますhttp://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

— dtothefp
ソース

2

jQuery：

$('body').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});

bodyセレクターを、子がドラッグアンドドロップされないようにする他のコンテナーに置き換えることができます。

— リス
ソース

1

これにはインラインコードを使用できます

<img draggable="false" src="http://www.ourkanpur.com/images/logo.png">

スニペットを展開

そして2番目のオプションは外部またはページ上のCSSを使用することです

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

<img src="http://www.ourkanpur.com/images/logo.png">

スニペットを展開

どちらが正しく機能している 私はこのサイトに外部CSSを使用したm個（ここをクリック）

— アビシェク・カマル
ソース

これらはいずれもFirefox（Mac Firefox 69を使用）では機能しないようです

— Ben Wheeler

1

答えは簡単です：

<body oncontextmenu="return false"/>-右クリックを <body ondragstart="return false"/>無効にする-マウスのドラッグを <body ondrop="return false"/>無効にする-マウスのドロップを無効にする

— 利得
ソース

-1

ここに示すcssプロパティを実行し、次のJavaScriptでondragstartを監視しました。

handleDragStart: function (evt) {
    if (evt.target.nodeName.match(/^(IMG|DIV|SPAN|A)$/i)) {
      evt.preventDefault();
      return false;
    }
  },

— アロカス
ソース

-2

私自身の答えを盗んで、画像の上に同じサイズの完全に透明な要素を追加するだけです。画像のサイズを変更するときは、必ず要素のサイズを変更してください。

これはほとんどのブラウザで動作し、古いブラウザでも動作するはずです。

— サブレフォステ
ソース