Deaktivieren Sie das Ziehen eines Bildes von einer HTML-Seite


194

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 ändere.


15
@AgentConundrum - Es gibt für mich kein Problem, wenn der Benutzer speichert und tut, was er will. Meine einzige Anforderung ist, dieses Bild nicht zu ziehen.
Benutzer 1034

Antworten:


261

Das kann dir gefallen ...

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

Sehen Sie, wie es funktioniert (oder nicht funktioniert)

Anscheinend verwenden Sie jQuery.

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

9
@alex - Der Zweck, kein Bild zu ziehen, besteht darin, das Bild nicht zu stehlen. Der Zweck ist völlig anders. Ich mache dieses Bild als sortierbar und ablegbar. Es dauert also lange, es zu erklären.
Benutzer 1034

2
@alex - Ist ondragstart browserunabhängig?
Benutzer 1034

1
@ AdamMerrifield Versuchen Sie $(document)statt$(window)
rybo111

2
Ich habe gerade herausgefunden, dass Sie die jQuery vereinfachen können, um:$('img').on('dragstart', false);
rybo111


174

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

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


3
Dies führte jedoch zu dem seltsamen Auswahleffekt zumindest bei FF. Besser noch falsch zurückgeben;
Bhumi Singhal

Es wird nicht verwendet, wenn Bild als Link.
Nilesh Patel

3
Sieht so aus, als würde dies in IE (jeder Version) nicht funktionieren. Siehe: caniuse.com/pointer-events
Justin Tanner

8
Auch eine reine CSS- Lösung: Platzieren Sie ein Element über dem img.
Alex

6
-1! Dies sollte verwendet werden, um ALLE Ponter-Ereignisse zu verhindern (einschließlich Ziehen, z. B. wenn Sie ein Bild hochladen möchten). Verwenden Sie Javascript-Lösung isntead!
Denys Vitali

129

Fügen Sie einfach draggable = "false" zu Ihrem Bild-Tag hinzu:

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

IE8 und darunter werden jedoch nicht unterstützt.


Ich verwende Magento, damit mein Div wie folgt aussieht: <div class = "product-img-box"> <? Php echo $ this-> getChildHtml ('media')?> </ Div> Wie kann ich Rechtsklick und kein Ziehen einschränken? mein Bild div. @dmo
Gem

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

4
+1 Verstehe die Abstimmungen nicht. Es ist nicht die ultimative Lösung, verhindert jedoch das Ziehen aller, nicht nur eines speziellen Bildes. Aber es zeigt die richtige Richtung (und ich denke, es war die erste Antwort, die es tut)
Dr.Molle

@DrMolle Möglicherweise war es eine Antwort auf die (seitdem gelöschten) Kommentare, die Steve zu meiner Antwort hinterlassen hat .
Alex

2
Denken Sie daran, dass Benutzer manchmal einen Link zu ihrer Lesezeichenleiste ziehen - diese Lösung würde diese Fähigkeit entfernen.
jClark

33

Die einfachste Cross-Browser-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



24

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

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

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


3
Ah! Sie hätten erwähnen sollen, dass Sie jQuery verwenden / jQuery verwenden könnten. +1 für die Verwendung von jQuery.
Alex

@alex - Es tut mir leid. Ich habe es selbst versucht. Und ich bin nicht sicher, ob es etwas anderes bewirkt.
Benutzer 1034

dir geht es gut! Nein, soweit ich weiß, sollte das, was Sie hier haben, keine negativen Auswirkungen auf irgendetwas anderes haben.
Alex

2
Was ist, wenn das Bild in ein <a>Tag eingewickelt ist ? Wenn der Benutzer dann auf das Bild klickt, wird der Link nicht angeklickt.
SeinopSys

Vielen Dank. Übrigens funktioniert dies auch in GWT mit einem `event.preventDefault ();`.
Johanna

14

Siehe diese 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önnen versuchen, eine Benutzerauswahl für Firefox und IE (10+) zu treffen:

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

11

Sie können jedem Bild, das nicht ziehbar sein soll, Folgendes hinzufügen (innerhalb des imgTags):

onmousedown="return false;"

z.B

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

10

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

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

9

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

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

Wenn Sie mehrere Bilder haben, die in ein <div>Tag eingeschlossen sind:

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

Funktioniert in allen gängigen Browsern.


8

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

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

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

Mit jQuery neue onBindung:

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


1
Mit .on sieht es folgendermaßen aus: $ (document) .on ('dragstart', 'img', function (e) {e.preventDefault ();});
Ialphan

Dies ist die richtige Lösung. Ein Ereignis, das für unbegrenzte imgElemente, Gegenwart oder Zukunft, bindend ist . Am wenigsten intensiv, am robustesten.
Bärenfreund

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

4

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

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

Hoffe das hilft jemandem.


3

Nun, ich weiß nicht, ob die Antworten hier allen geholfen haben oder nicht, aber hier ist ein einfacher Inline-CSS-Trick, der Ihnen definitiv helfen würde, das Ziehen und Auswählen von Texten auf einer HTML-Seite zu deaktivieren.

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

Der Code sieht folgendermaßen aus: <body ondragstart="return false" onselectstart="return false">


3

Sie können meine Lösung als die beste betrachten. Die meisten Antworten sind nicht kompatibel mit alten Browsern wie IE8 seit e.preventDefault () wont sowie unterstützt werden onDragStart Ereignis. Um dies browserübergreifend zu tun, müssen Sie das Mausbewegungsereignis für dieses Bild blockieren . Siehe Beispiel unten:

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 funktioniert


3

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;

1
Scheint nicht auf Firefox zu funktionieren (mit Mac Firefox 69)
Ben Wheeler

2

Nun, dies 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 verhindern mousedown Bildern verhindern. Was 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

jQuery:

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

Sie können den Body Selector durch einen anderen Container ersetzen, den Kinder, die Sie verhindern möchten, nicht per Drag & Drop verschieben können.


1

Hierfür können Sie Inline-Code verwenden

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

Die zweite Option ist die Verwendung von externem oder On-Page-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">

Beide funktionieren korrekt Ich verwende externes CSS auf dieser Site (hier klicken)


Keines davon scheint auf Firefox (mit Mac Firefox 69) zu funktionieren
Ben Wheeler

1

Die Antwort ist einfach:

<body oncontextmenu="return false"/>- Rechtsklick <body ondragstart="return false"/>deaktivieren - Maus ziehen <body ondrop="return false"/>deaktivieren - Mausablage deaktivieren


-1

Ich habe die hier gezeigten CSS-Eigenschaften ausgeführt und ondragstart mit dem folgenden Javascript überwacht:

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

-2

Von meiner eigenen Antwort stehlen , fügen Sie einfach ein vollständig transparentes Element derselben Größe über dem Bild hinzu. Achten Sie beim Ändern der Bildgröße darauf, die Größe des Elements zu ändern.

Dies sollte für die meisten Browser funktionieren, auch für ältere.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.