web-dev-qa-db-ja.com

HTMLページから画像をドラッグできないようにする

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

私は画像のサイズを変更しているので、私はその画像を背景画像として保存したくありません。

javascriptjqueryhtmlcssimage
187
User 1034

私は自分で試してみて、これがうまくいっているのを見つけました。

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

これはすべての画像のドラッグを無効にすると確信しています。それが何か他のものに影響するかどうかわからない。

24
User 1034

あなたはこれが好きです...

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

動作している（または動作していない）ことがわかります

あなたはjQueryを使っているようです。

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

CSSのみの解決策：pointer-events: noneを使う

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

145
mikhuang

画像タグにdraggable = "false"を追加するだけです。

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

IE8以下はサポートしていません。

114
dmo
window.ondragstart = function() { return false; }
41
Ben

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

<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で動作していないということです

26
imal hasaranga perera
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/ それは魔法のように動作する！ :)

24
Namdev Matrimony

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

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

FirefoxとIE（10+）では ser-select を試すことができます。

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

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

onmousedown="return false;"

例えば.

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

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

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

直接使用してください：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>

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

9
Jan

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

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

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

JQueryの新しいonバインディングの場合：

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); });（ありがとう@ialphan）

8
guzart

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

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
4
Omid Farvid

他の誰かが他のjsライブラリと衝突している場合は、そのような衝突がないようにしてください。

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

これが誰かに役立つことを願っています。

4
Paul

これで答えがみんなに役立つかどうかはわかりませんが、HTMLページ上でテキストをドラッグして選択するのを無効にするのに役立つ単純なインラインCSSのトリックです。

<body>タグにondragstart="return false"を追加してください。これは画像のドラッグを無効にします。しかし、テキスト選択も無効にしたい場合は、onselectstart="return false"を追加してください。

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

3
Abhisek Das
<img draggable="false" src="images/testimg1.jpg" alt=""/>
3
MurWade

これは可能であり、投稿された他の答えは完全に有効ですが、あなたはブルートフォースアプローチを取り、画像に対するmousedownのデフォルトの振る舞いを防ぐことができます。これは、画像のドラッグを開始することです。

このようなもの：

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

あなたは私の解決策を最善と考えるかもしれません。 e.preventDefault（）イベントもondragstartイベントもサポートされていないため、ほとんどの回答は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でもテスト済み

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

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

2
dtothefp

答えは簡単です：

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

0
Gain