Désactiver le glissement d'une image à partir d'une page HTML

194

J'ai besoin de mettre une image sur ma page. Je souhaite désactiver le glissement de cette image. J'essaie beaucoup de choses mais sans aide. Quelqu'un peut-il m'aider?

Je ne veux pas conserver cette image comme image d'arrière-plan car je redimensionne l'image.

javascript jquery html css image Utilisateur 1034
la source
15
@AgentConundrum - Il n'y a aucun problème pour moi si l'utilisateur enregistre et fait ce qu'il veut. Ma seule exigence est de ne pas faire glisser cette image.
Utilisateur 1034

Réponses:

261

Vous pouvez aimer ça ...

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

Le voir fonctionner (ou ne pas fonctionner, plutôt)

Il semble que vous utilisiez jQuery.

$('img').on('dragstart', function(event) { event.preventDefault(); });
alex
la source
9
@alex - Le but de ne pas faire glisser l'image n'est pas de voler l'image. Le but est complètement différent. Je fais cette image comme triable et largable. Il faut donc beaucoup de temps pour l'expliquer.
Utilisateur 1034
2
@alex - Ondragstart est-il indépendant du navigateur?
Utilisateur 1034
1
@AdamMerrifield Try $(document)au lieu de$(window)
rybo111
2
Je viens de comprendre que vous pouvez simplifier la jQuery pour:$('img').on('dragstart', false);
rybo111
2
@alex Sous gestionnaire:The value false is also allowed as a shorthand for a function that simply does return false.
Adam Merrifield
174

Solution CSS uniquement: utiliser pointer-events: none

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

mikhuang
la source
3
Mais cela a conduit à l'effet de sélection étrange dans FF atleast. Mieux vaut toujours retourner faux;
Bhumi Singhal
il n'est pas utilisé lorsque l'image en tant que lien.
Nilesh patel
3
Il semble que cela ne fonctionnera pas dans IE (n'importe quelle version) voir: caniuse.com/pointer-events
Justin Tanner
8
Aussi une solution CSS uniquement : placez un élément sur le img.
alex
6
-1 ! Cela devrait être utilisé pour empêcher TOUS les événements de pontage (y compris le glissement, comme lorsque vous souhaitez télécharger une image). Utiliser la solution javascript n'est pas lu!
Denys Vitali
129

ajoutez simplement draggable = "false" à votre tag d'image:

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

Cependant, IE8 et les versions antérieures ne sont pas compatibles.

dmo
la source
J'utilise Magento donc mon div aime: <div class = "product-img-box"> <? Php echo $ this-> getChildHtml ('media')?> </div> Comment puis-je restreindre le clic droit et ne pas faire glisser mon image div. @dmo
Gem
41 
window.ondragstart = function() { return false; }
Ben
la source
4
+1 Je ne comprends pas les votes négatifs. Ce n'est pas la solution ultime, alors qu'elle empêche tout glisser, pas seulement une image spéciale. Mais cela montre la bonne direction (et je pense que c'était la première réponse qui le fait)
Dr.Molle
@DrMolle C'est peut-être en réponse aux commentaires (depuis supprimés) laissés par Steve sur ma réponse .
alex
2
N'oubliez pas que parfois, les gens font glisser un lien vers leur barre de favoris - cette solution supprimerait cette capacité.
jClark
33

la solution de navigateur croisée la plus simple est 

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

problème avec

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

est qu'il ne fonctionne pas dans Firefox

imal hasaranga perera
la source
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;
}

Je l'ai utilisé sur mon site Web à http://www.namdevmatrimony.in/ Cela fonctionne comme une magie !!! :)

Namdev Matrimony
la source
6
Il est draggable dans Firefox
Dean Christian Armada
24

Je me suis essayé et j'ai trouvé que cela fonctionnait.

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

Je suis sûr que cela désactive le glissement de toutes les images. Pas sûr que cela affecte autre chose.

Utilisateur 1034
la source
3
Ah! Vous auriez dû mentionner que vous utilisiez jQuery / pourriez utiliser jQuery. +1 pour utiliser jQuery.
Alex
@alex - Je suis désolé. J'essayais moi-même. Et je ne suis pas sûr que cela affecte autre chose.
Utilisateur 1034
tu vas bien! Non, autant que je sache, faire ce que vous avez ici ne devrait avoir aucun effet négatif sur quoi que ce soit d'autre.
Alex
2
Que faire si l'image est enveloppée dans une <a>balise? Ensuite, si l'utilisateur clique sur l'image, le lien ne sera pas cliqué.
SeinopSys
Merci. Btw, cela fonctionne également dans GWT avec un `event.preventDefault ();`.
Johanna
14

Voir cette réponse ; dans Chrome et Safari, vous pouvez utiliser le style suivant pour désactiver le glissement par défaut:

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

Vous pouvez essayer la sélection par l' utilisateur pour Firefox et IE (10+):

-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element
mhu
la source
11

Vous pouvez ajouter ce qui suit à chaque image que vous ne voulez pas faire glisser (à l'intérieur de la imgbalise):

onmousedown="return false;"

par exemple 

img src="Koala.jpg" onmousedown="return false;"
BOBO
la source
10

Ce code fait exactement ce que vous voulez. Il empêche l'image de glisser tout en autorisant toutes autres actions qui dépendent de l'événement.

$("img").mousedown(function(e){
    e.preventDefault()
});
Robert
la source
9

Utilisez directement ceci: ondragstart="return false;"dans votre balise d'image.

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

Si vous avez plusieurs images, enveloppées sur une <div>balise:

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

Fonctionne dans tous les principaux navigateurs.

Jan
la source
8

Depuis mes images ont été créées en utilisant ajax, et donc pas disponibles sur windows.load.

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

De cette façon, je peux contrôler quelle section bloque le comportement, il n'utilise qu'une seule liaison d'événement et cela fonctionne pour les futures images créées ajax sans avoir à faire quoi que ce soit.

Avec la nouvelle onliaison jQuery :

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

guzart
la source
1
En utilisant .on, ce sera comme ceci: $ (document) .on ('dragstart', 'img', function (e) {e.preventDefault ();});
ialphan
Ceci est la bonne solution. Un événement unique pour des imgéléments illimités , présents ou futurs. Moins intensif, plus robuste.
Bearfriend
5 
<img draggable="false" src="images/testimg1.jpg" alt=""/>
Mustafa
la source
4

Excellente solution, avait un petit problème avec les conflits, si quelqu'un d'autre a un conflit avec une autre bibliothèque js, n'activez simplement aucun conflit comme celui-ci.

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

J'espère que cela aide quelqu'un.

Paul
la source
3

Eh bien, je ne sais pas si les réponses ici ont aidé tout le monde ou non, mais voici une astuce CSS en ligne simple qui vous aiderait certainement à désactiver le glissement et la sélection de textes sur une page HTML.

Sur votre <body>tag, ajoutez ondragstart="return false". Cela désactivera le glissement des images. Mais si vous souhaitez également désactiver la sélection de texte, ajoutez-le onselectstart="return false".

Le code ressemblera à ceci: <body ondragstart="return false" onselectstart="return false">

Abhisek Das
la source
3

Vous pouvez considérer ma solution comme la meilleure. La plupart des réponses ne sont pas compatibles avec les anciens navigateurs comme IE8 car e.preventDefault () ne sera pas pris en charge ainsi que l' événement ondragstart . Pour le faire compatible avec plusieurs navigateurs, vous devez bloquer l' événement mousemove pour cette image. Voir l'exemple ci-dessous:

jQuery

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

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

testé et travaillé même pour IE8

CodeGems
la source
3

Définissez les propriétés CSS suivantes sur l'image:

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
Omid Farvid
la source
1
Ne semble pas fonctionner sur Firefox (avec Mac Firefox 69)
Ben Wheeler
2

Eh bien, cela est possible, et les autres réponses publiées sont parfaitement valides, mais vous pouvez adopter une approche par force brute et empêcher le comportement par défaut de mousedownsur les images. Ce qui est de commencer à faire glisser l'image.

Quelque chose comme ça:

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

jQuery:

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

Vous pouvez remplacer le sélecteur de corps par tout autre conteneur que les enfants que vous souhaitez empêcher d'être glissé et déposé.

Lis
la source
1

Vous pouvez utiliser le code en ligne pour cela

<img draggable="false" src="http://www.ourkanpur.com/images/logo.png">
Développer l'extrait

Et la deuxième option est d'utiliser des CSS externes ou sur la 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">
Développer l'extrait

Les deux fonctionnent correctement J'utilise des CSS externes sur ce site (cliquez ici)

Abhishek kamal
la source
Aucun de ceux-ci ne semble fonctionner sur Firefox (en utilisant Mac Firefox 69)
Ben Wheeler
1

La réponse est simple:

<body oncontextmenu="return false"/>- désactiver le clic droit <body ondragstart="return false"/>- désactiver le glissement de la souris - désactiver le déplacement de la <body ondrop="return false"/>souris

Gain
la source
-1

J'ai fait les propriétés css montrées ici ainsi que surveiller ondragstart avec le javascript suivant:

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

En volant ma propre réponse , il suffit d'ajouter un élément complètement transparent de la même taille sur l'image. Lorsque vous redimensionnez votre image, assurez-vous de redimensionner l'élément.

Cela devrait fonctionner pour la plupart des navigateurs, même les plus anciens.

Sablefoste
la source