webentwicklung-frage-antwort-db.com.de

Deaktivieren Sie das Ziehen eines Bildes von einer HTML-Seite

Ich muss ein Bild in meine Seite einfügen. Ich möchte das Ziehen dieses Bildes deaktivieren. Ich versuche viele Dinge, aber keine Hilfe. Kann mir jemand helfen?

Ich möchte dieses Bild nicht als Hintergrundbild behalten, da ich die Größe des Bildes verändere.

189
User 1034

Ich habe es selbst versucht und festgestellt, dass dies funktioniert.

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

Ich bin sicher, dass dies das Ziehen aller Bilder verhindert. Ich bin mir nicht sicher, ob es etwas anderes bewirkt.

24
User 1034

Das kann dir gefallen ...

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

Siehe es funktioniert (oder funktioniert eher nicht)

Anscheinend verwenden Sie jQuery.

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

Nur CSS Lösung: benutze pointer-events: none

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

150
mikhuang

füge einfach draggable = "false" zu deinem Image-Tag hinzu:

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

IE8 und darunter unterstützt jedoch nicht.

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

einfachste browserübergreifende Lösung ist

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

problem mit

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

ist, dass es in Firefox nicht funktioniert

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

Ich habe es auf meiner Website unter http://www.namdevmatrimony.in/ verwendet. Es funktioniert wie ein Zauber !!! :)

24

Siehe dies Antwort ; In Chrome und Safari können Sie den folgenden Stil verwenden, um das Standard-Ziehen zu deaktivieren:

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

Sie könnten versuchen Benutzerauswahl für Firefox und IE (10+):

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

Sie können jedem Bild, das Sie nicht ziehen möchten, Folgendes hinzufügen (innerhalb des img -Tags):

onmousedown="return false;"

z.B.

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

Dieser Code macht genau das, was Sie wollen. Es verhindert, dass das Bild verschoben wird, während andere vom Ereignis abhängige Aktionen zugelassen werden.

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

Verwenden Sie dies direkt: ondragstart="return false;" in Ihrem Image-Tag.

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

Wenn Sie mehrere Bilder haben, wird diese in ein <div> Etikett:

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

Funktioniert in allen gängigen Browsern.

9
Jan

Da meine Bilder mit Ajax erstellt wurden und daher nicht auf windows.load verfügbar sind.

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

Auf diese Weise kann ich steuern, welcher Abschnitt das Verhalten blockiert, es wird nur eine Ereignisbindung verwendet und es funktioniert für zukünftige Ajax-erstellte Bilder, ohne dass etwas getan werden muss.

Mit jQuery new on binding:

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); }); (danke @ialphan)

8
guzart

Legen Sie die folgenden CSS-Eigenschaften für das Bild fest:

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

Tolle Lösung, hatte ein kleines Problem mit Konflikten. Wenn jemand einen Konflikt aus einer anderen Bibliothek hat, aktivieren Sie einfach keinen Konflikt wie diesen.

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

Hoffe das hilft jemandem aus.

4
Paul

Ich weiß nicht, ob die Antworten hier allen geholfen haben oder nicht, aber hier ist ein einfacher Inline-CSS-Trick, mit dem Sie das Ziehen und Auswählen von Texten auf einer HTML-Seite definitiv deaktivieren können.

Fügen Sie an Ihrem <body> - Tag ondragstart="return false" Hinzu. Dadurch wird das Ziehen von Bildern deaktiviert. Wenn Sie jedoch auch die Textauswahl deaktivieren möchten, fügen Sie onselectstart="return false" Hinzu.

Der Code sieht dann so aus: <body ondragstart="return false" onselectstart="return false">

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

Nun, das ist möglich und die anderen Antworten sind vollkommen gültig, aber Sie könnten einen Brute-Force-Ansatz wählen und das Standardverhalten von mousedown auf Bildern verhindern. Welches ist, um das Bild zu ziehen.

Etwas wie das:

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

Sie können meine Lösung als die beste betrachten. Die meisten Antworten sind mit alten Browsern wie IE8 nicht kompatibel, da e.preventDefault () nicht unterstützt wird sowie ondragstart event. Um es browserübergreifend zu machen, müssen Sie mousemove event für dieses Bild blockieren. Siehe folgendes Beispiel:

jQuery

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

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

getestet und auch für IE8 gearbeitet

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

Funktioniert in diesem Plunker http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

2
dtothefp

Die Antwort ist einfach:

<body oncontextmenu="return false"/> - Rechtsklick deaktivieren <body ondragstart="return false"/> - deaktiviere das Ziehen mit der Maus <body ondrop="return false"/> - deaktiviere das Ablegen mit der Maus

0
Gain