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.

javascript jquery html css image Benutzer 1034
quelle

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

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

Alex
quelle

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

2

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

Adam Merrifield

174

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

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

Mikhuang
quelle

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.

dmo
quelle

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

Ben
quelle

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

imal hasaranga perera
quelle

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

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

Namdev Ehe
quelle

6

Es ist in Firefox ziehbar

Dean Christian Armada

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.

Benutzer 1034
quelle

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

mhu
quelle

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

BOBO
quelle

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

Robert
quelle

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.

Jan.
quelle

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)

Guzart
quelle

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=""/>

Mustafa
quelle

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.

Paul
quelle

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">

Abhisek Das
quelle

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

CodeGems
quelle

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;

Omid Farvid
quelle

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

Alex
quelle

2

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

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

dtothefp
quelle

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.

Lis
quelle

1

Hierfür können Sie Inline-Code verwenden

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

Erweitern Sie das Snippet

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">

Erweitern Sie das Snippet

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

Abhishek Kamal
quelle

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

Dazugewinnen
quelle

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

Alocus
quelle

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

Sablefoste
quelle

Deaktivieren Sie das Ziehen eines Bildes von einer HTML-Seite

Antworten: