Disabilita il trascinamento di un'immagine da una pagina HTML

194

Devo mettere un'immagine nella mia pagina. Voglio disabilitare il trascinamento di quell'immagine. Sto provando molte cose ma nessun aiuto. Qualcuno può darmi una mano?

Non voglio mantenere quell'immagine come immagine di sfondo perché sto ridimensionando l'immagine.

— Utente 1034
fonte

15

@AgentConundrum - Non c'è alcun problema per me se l'utente salva e fa quello che vuole. Il mio unico requisito è non trascinare quell'immagine.

— Utente 1034

261

Ti può piacere ...

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

Vedi come funziona (o non funziona, piuttosto)

Sembra che tu stia usando jQuery.

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

— alex
fonte

9

@alex - Lo scopo di non trascinare l'immagine non è rubare l'immagine. Lo scopo è completamente diverso. Sto rendendo quell'immagine ordinabile e trascurabile. Quindi ci vuole molto tempo per spiegarlo.

— Utente 1034

2

@alex - ondragstart è indipendente dal browser?

— Utente 1034

1

@AdamMerrifield Try $(document)invece di$(window)

— rybo111

2

Ho appena capito che puoi semplificare jQuery per:$('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

Solo soluzione CSS: utilizzare pointer-events: none

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

— mikhuang
fonte

3

Ma questo ha portato allo strano effetto di selezione di almeno FF. Meglio ancora restituire false;

— Bhumi Singhal,

non viene utilizzato quando l'immagine come collegamento.

— Patel Nilesh,

3

Sembra che questo non funzionerà in IE (qualsiasi versione) vedi: caniuse.com/pointer-events

— Justin Tanner

8

Anche una soluzione solo CSS : posiziona un elemento sopra il img.

— alex,

6

-1! Questo dovrebbe essere usato per prevenire TUTTI gli eventi ponter (incluso il trascinamento, come quando si desidera caricare un'immagine). Usa la soluzione javascript isntead!

— Denys Vitali,

129

aggiungi draggable = "false" al tag immagine:

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

IE8 e inferiori non supportano tuttavia.

— DMO
fonte

Sto usando Magento così il mio div piace: <div class = "product-img-box"> <? Php echo $ this-> getChildHtml ('media')?> </div> Come posso limitare il clic destro e non trascinabile la mia immagine div. @dmo

— Gemma

41

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

— Ben
fonte

4

+1 Non capisco i voti negativi. Non è la soluzione definitiva, mentre impedisce di trascinare tutto, non solo un'immagine speciale. Ma mostra la giusta direzione (e penso che sia stata la prima risposta a farlo)

— Dr.Molle

@DrMolle Potrebbe essere stato in risposta ai commenti (da quando cancellati) lasciati da Steve sulla mia risposta .

— alex,

2

Ricorda che a volte le persone trascinano un link nella barra dei segnalibri: questa soluzione rimuove questa capacità.

— jClark,

33

la soluzione cross browser più semplice è

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

problema con

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

è che non funziona in Firefox

— imal hasaranga perera
fonte

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

L'ho usato sul mio sito web all'indirizzo http://www.namdevmatrimony.in/ Funziona come per magia !!! :)

— Namdev Matrimony
fonte

6

È trascinabile in Firefox

— Dean Christian Armada,

24

Ho provato me stesso e ho scoperto che funziona.

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

Sono sicuro che questo disabilita il trascinamento di tutte le immagini. Non sono sicuro che abbia effetto su qualcos'altro.

— Utente 1034
fonte

3

Ah! Avresti dovuto menzionare che stavi usando jQuery / potresti usare jQuery. +1 per l'utilizzo di jQuery.

— Alex,

@alex - Mi dispiace. Ci stavo provando da solo. E non sono sicuro che abbia effetto su qualcos'altro.

— Utente 1034

stai bene! No, per quanto ne so, fare ciò che hai qui non dovrebbe avere effetti negativi su nient'altro.

— Alex,

2

Cosa succede se l'immagine è racchiusa in un <a>tag? Quindi, se l'utente fa clic sull'immagine, il collegamento non verrà cliccato.

— SeinopSys,

Grazie. A proposito, questo funziona anche in GWT con un `event.preventDefault ();`.

— Johanna,

14

Vedi questa risposta ; in Chrome e Safari puoi utilizzare il seguente stile per disabilitare il trascinamento predefinito:

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

Puoi provare a selezionare l'utente per Firefox e IE (10+):

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

— MHU
fonte

11

Puoi aggiungere quanto segue a ogni immagine che non vuoi trascinare (all'interno del imgtag):

onmousedown="return false;"

per esempio

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

— BOBO
fonte

10

Questo codice fa esattamente quello che vuoi. Impedisce il trascinamento dell'immagine pur consentendo qualsiasi altra azione che dipende dall'evento.

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

— Roberto
fonte

9

Usa direttamente questo: ondragstart="return false;"nel tuo tag immagine.

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

Se hai più immagini, avvolte in un <div>tag:

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

Funziona con tutti i principali browser.

— Jan
fonte

8

Dal momento che le mie immagini sono state create utilizzando Ajax, e quindi non disponibili su windows.load.

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

In questo modo posso controllare quale sezione blocca il comportamento, utilizza solo un binding di eventi e funziona per le future immagini create da Ajax senza dover fare nulla.

Con la nuova onrilegatura jQuery :

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

— guzart
fonte

1

Usando .on sarà così: $ (document) .on ('dragstart', 'img', function (e) {e.preventDefault ();});

— ialphan,

Questa è la soluzione corretta Un evento vincolante per imgelementi illimitati , presenti o futuri. Meno intenso, più robusto.

— Bearfriend

5

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

— Mustafa
fonte

4

Ottima soluzione, ha avuto un piccolo problema con i conflitti, se qualcun altro ha un conflitto da altre librerie js semplicemente non consente conflitti come quelli.

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

Spero che questo aiuti qualcuno.

— Paolo
fonte

3

Beh, non so se le risposte qui hanno aiutato tutti o no, ma ecco un semplice trucco CSS in linea che ti aiuterebbe sicuramente a disabilitare il trascinamento e la selezione di testi su una pagina HTML.

Nel tuo <body>tag aggiungi ondragstart="return false". Ciò disabiliterà il trascinamento delle immagini. Ma se vuoi anche disabilitare la selezione del testo, aggiungi onselectstart="return false".

Il codice sarà simile al seguente: <body ondragstart="return false" onselectstart="return false">

— Abhisek Das
fonte

3

Puoi considerare la mia soluzione la migliore. La maggior parte delle risposte non è compatibile con i vecchi browser come IE8 poiché e.preventDefault () non sarà supportato così come l' evento ondragstart . Per farlo compatibile con browser diversi devi bloccare mousemove evento per questa immagine. Vedi l'esempio seguente:

jQuery

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

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

testato e funzionato anche per IE8

— CodeGems
fonte

3

Imposta le seguenti proprietà CSS sull'immagine:

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

— Omid Farvid
fonte

1

Non sembra funzionare su Firefox (usando Mac Firefox 69)

— Ben Wheeler,

2

Bene, questo è possibile e le altre risposte pubblicate sono perfettamente valide, ma potresti adottare un approccio a forza bruta e prevenire il comportamento predefinito di mousedown immagini. Quale, è iniziare a trascinare l'immagine.

Qualcosa come questo:

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

— alex
fonte

2

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

Funziona in questo Plunker http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

— dtothefp
fonte

2

jQuery:

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

È possibile sostituire il selettore del corpo con qualsiasi altro contenitore che i bambini che si desidera impedire vengano trascinati.

— lis
fonte

1

È possibile utilizzare il codice incorporato per questo

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

Espandi frammento

E la seconda opzione è usare CSS esterno o on-page

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

Espandi frammento

Entrambi funzionano correttamente Sto usando CSS esterni su questo sito (clicca qui)

— Abhishek Kamal
fonte

Nessuno di questi sembra funzionare su Firefox (usando Mac Firefox 69)

— Ben Wheeler,

1

La risposta è semplice:

<body oncontextmenu="return false"/>- disabilita il tasto destro del mouse <body ondragstart="return false"/>- disabilita il trascinamento del mouse <body ondrop="return false"/>- disabilita il rilascio del mouse

— Guadagno
fonte

-1

Ho fatto le proprietà CSS mostrate qui e ho monitorato ondragstart con il seguente javascript:

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

— Alocus
fonte

-2

Rubare dalla mia stessa risposta , basta aggiungere un elemento completamente trasparente della stessa dimensione sull'immagine. Quando ridimensioni l'immagine, assicurati di ridimensionare l'elemento.

Questo dovrebbe funzionare per la maggior parte dei browser, anche per quelli meno recenti.

— Sablefoste
fonte