web-dev-qa-db-fra.com

Désactiver le glissement d'une image depuis une page HTML

J'ai besoin de mettre une image dans ma page. Je veux désactiver le glissement de cette image. J'essaye beaucoup de choses mais aucune aide. Quelqu'un peut-il m'aider?

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

javascriptjqueryhtmlcssimage
189
User 1034

J'ai essayé moi-même et j'ai constaté 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 quelque chose d'autre.

24
User 1034

Vous pouvez aimer ça ...

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

Voir le travail (ou ne fonctionne pas, plutôt)

Il semble que vous utilisiez jQuery.

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

Solution CSS uniquement: utilisez pointer-events: none

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

150
mikhuang

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

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

IE8 et sous ne supporte pas cependant.

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

la solution la plus simple pour tous les navigateurs 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-ce qu'il ne fonctionne pas dans firefox

28
imal hasaranga perera
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 à l'adresse http://www.namdevmatrimony.in/ Il fonctionne comme par magie !!! :)

24
Namdev Matrimony

Voir ceci 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 sélection de l'utilisateur pour Firefox et IE (10+):

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

Vous pouvez ajouter les éléments suivants à chaque image que vous ne souhaitez pas pouvoir déplacer (dans la balise img):

onmousedown="return false;"

par exemple.

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

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

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

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 dans une balise <div>:

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

Fonctionne dans tous les principaux navigateurs.

9
Jan

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, elle utilise une seule liaison d’événement et fonctionne pour les futures images créées par ajax sans rien faire.

Avec jQuery new on binding:

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

8
guzart

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;
4
Omid Farvid

Excellente solution, il y 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 tel.

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

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

4
Paul

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

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

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

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

C'est possible, et les autres réponses postées sont parfaitement valables, mais vous pouvez adopter une approche de force brute et empêcher le comportement par défaut de mousedown sur les images. 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; };
    }  
};
2
Alex

Vous pouvez considérer ma solution comme la meilleure. La plupart des réponses ne sont pas compatibles avec les anciens navigateurs tels que IE8, car e.preventDefault () ne sera pas pris en charge de même que l'événement ondragstart. Pour ce faire, vous devez bloquer l'événement mousemove pour cette image. Voir 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

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

Fonctionne dans ce Plunker http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

2
dtothefp

La réponse est simple:

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

0
Gain