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

J'ai besoin de mettre une image dans ma page. Je veux désactiver le déplacement de l'image. Je suis en train d'essayer beaucoup de choses, mais aucune aide. Quelqu'un peut-il m'aider ?

Je ne veux pas garder cette image comme une image de fond d'écran parce que je suis le redimensionnement de l'image.

Il n'y a pas de problème pour moi si l'utilisateur enregistre et fait tout ce qu'il veut. Ma seule exigence est de ne pas glisser cette image.

InformationsquelleAutor User 1034 | 2010-11-18

259

Vous pouvez comme ça...
```
document.getElementById('my-image').ondragstart = function() { return false; };
```
Voir qu'il fonctionne (ou ne fonctionne pas, plutôt)

Il semble que vous êtes à l'aide de jQuery.
```
$('img').on('dragstart', function(event) { event.preventDefault(); });
```
- Le but de ne pas avoir l'image en faisant glisser n'est pas de voler l'image. Le but est totalement différent. J'ai fais cette image comme sortable et droppable. Donc, il faut un long temps pour l'expliquer.
- Est ondragstart est indépendant du navigateur ?
- Il semble être à l'exception de < Firefox 3.5
- Vous aussi, vous mate désolé à ce sujet. Les commentaires sont devenus hors de propos après la vague de modifications et après il s'est avéré que ma réponse n'avait pas été arraché.
- Il fonctionne parfaitement en Chrome 35 (sur Ubuntu 13.04).
- Fonctionne pour moi en Chrome 37 pour windows. Test: jsfiddle.net/g338ykLg
- Cette méthode ne fonctionne PAS avec jQuery délégation jsfiddle.net/g338ykLg/2
- Essayez $(document) au lieu de $(window)
- J'ai juste travaillé, vous pouvez simplifier le jQuery pour: $('img').on('dragstart', false);
- Vous pourriez peut-être, mais je voudrais l'éviter comme) autant que je sache, il n'est pas documenté par jQuery et b) confusion de ce qu'elle pourrait en fait être en train de faire.
- Sous gestionnaire: The value false is also allowed as a shorthand for a function that simply does return false.
- Eh bien là vous allez. Une chose à noter est qu'il permettra d'éviter la propagation de trop, ce qui pourrait être un problème.
InformationsquelleAutor alex
153

CSS seule solution: utiliser pointer-events: none

https://developer.mozilla.org/en-US/docs/CSS/pointer-events
- Mais cela a conduit à l'étrange effet de sélection dans FF atleast. Mieux encore return false;
- il n'est pas utilisé lorsque l'image en tant que lien.
- Ressemble cela ne fonctionne pas dans IE (toutes les versions), voir: caniuse.com/pointer-events
- Aussi un CSS solution: placer un élément fil le img.
- Non, il n'est pas! Certains d'entre nous ont encore besoin de soutien IE9 et pour le pire.
- Hehe, gotcha @Lego. Malédiction-vous plus IE! 🙂
- Cela force le type de curseur pour cursor: default :'(
- -1 ! Cela devrait être utilisé pour éviter TOUS les ponter les événements (y compris les faisant glisser, comme lorsque vous voulez envoyer une image). L'utilisation de javascript solution plutôt que!
- Dirait qu'il travaille dans IE11.
- Pour mon problème (je ne voulais pas de l'interaction à tous dans un div), il a travaillé pour des navigateurs modernes
- Cela empêche toute interaction, et non simplement de glisser-déposer
InformationsquelleAutor mikhuang
116

juste ajouter draggable="false" à votre image tag:
```
<img draggable="false" src="image.png">
```
IE8 et moins ne supporte pas cependant.
- Fonctionne dans Chrome
- Ne fonctionne pas dans firefox 33.0 ubuntu.
- Ne fonctionne pas dans Firefox 43 soit
- J'utilise Magento donc mon div comme : <div class="product-img-box"> <?php echo $this->getChildHtml('media') ?> </div> Comment puis-je restreindre un clic droit et non déplaçable mon image div. @dmo
InformationsquelleAutor dmo
41
```
window.ondragstart = function() { return false; } 
```
- +1 Ne comprends pas les downvotes. Ce n'est pas la solution ultime, alors que cela empêche de faire glisser tous, pas seulement une image particulière. Mais il montre la bonne direction(et je pense que c'était la première réponse qui le fait)
- Il peut avoir été en réponse à l' (supprimé depuis) les commentaires laissés par Steve sur ma réponse.
- Rappelez-vous que, parfois, les gens vont faire glisser un lien vers leur barre de signets -- cette solution permettrait de supprimer cette possibilité.
InformationsquelleAutor Ben

plus simple navigateur croix solution 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

InformationsquelleAutor imal hasaranga perera

24

Je me suis essayé et trouvé ce qui est de travail.
```
$("img").mousedown(function(){
    return false;
});
```
Je suis sûr que cela désactive le déplacement de toutes les images. Pas sûr qu'il les effets de quelque chose d'autre.
- Ah! Vous devriez vous avez mentionné que vous étiez à l'aide de jQuery/pourrait utiliser jQuery. +1 pour l'utilisation de jQuery.
- Je suis désolé. J'ai été l'essayer moi-même. Et je ne suis pas sûr de l'effet de quelque chose d'autre.
- vous êtes beaux! Non, autant que je sache, à faire ce que vous avez ici ne devrait pas avoir d'effets négatifs sur quoi que ce soit d'autre.
- Que faire si l'image est enroulé à l'intérieur d'un <a> tag? Ensuite, si l'utilisateur clique sur l'image, le lien n'aurais pas cliqué.
- Merci. Btw, cela fonctionne aussi dans GWT avec un " événement.preventDefault();`.
- $('img').mousedown(false) plus courte. Et @SeinopSys Quel navigateur vous utilisez? Il fonctionne toujours à tout le moins pour moi (FF v59.0.2). N'ai pas testé avec d'autres navigateurs, mais voici un violon pour le test.
InformationsquelleAutor User 1034

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/
Il fonctionne comme une magie!!! 🙂

C'est déplaçable dans firefox

InformationsquelleAutor Namdev Matrimony

13

Voir ce réponse; dans Chrome et Safari, vous pouvez utiliser le style suivant pour désactiver par défaut le faisant glisser:
```
-webkit-user-drag: auto | element | none;
```
Vous pouvez essayer de l'utilisateur de sélectionner pour Firefox et IE(10+):
```
-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element
```
InformationsquelleAutor mhu
11

Vous pouvez ajouter les éléments suivants pour chaque image que vous ne voulez pas être déplaçable (à l'intérieur de la img tag):
```
onmousedown="return false;"
```
par exemple
```
img src="Koala.jpg" onmousedown="return false;"
```
InformationsquelleAutor BOBO
10

Ce code fait exactement ce que vous voulez. Il empêche l'image de glisser tout en permettant à d'autres actions qui dépendent de l'événement.
```
$("img").mousedown(function(e){
    e.preventDefault()
});
```
InformationsquelleAutor Robert
9

Utiliser directement cette: ondragstart="return false;" dans votre balise image.
```
<img src="http://image-example.png" ondragstart="return false;"/>
```
Si vous avez plusieurs images, enroulée sur un <div> tag:
```
<div ondragstart="return false;">
   <img src="image1.png"/>
   <img scr="image2.png"/>
</div>
```
Fonctionne dans tous les principaux navigateurs.

InformationsquelleAutor Jan
8

Depuis mes images ont été créées à l'aide d'ajax, et n'est donc pas disponible sur windows.de la charge.

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

De cette façon, je peux contrôler la section qui bloque le comportement, il utilise uniquement un événement contraignant et qu'il travaille pour l'avenir ajax créé des images sans avoir à faire quoi que ce soit.

Avec jQuery nouveau on de liaison:

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); });
(merci @ialphan)
- À l'aide de .il sera comme ceci: $(document).sur('dragstart','img',function(e){e.preventDefault();});
- C'est la bonne solution. Un événement de liaison pour un nombre illimité de img éléments, présents ou futurs. Moins intensive, plus robuste.
InformationsquelleAutor guzart
4

Grande solution, avait un petit problème avec les conflits,
Si quelqu'un a des conflits à partir d'autres bibliothèque js il vous suffit d'activer pas de conflit comme si.
```
var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) { event.preventDefault(); });
```
Espère que cela aide quelqu'un à sortir.

InformationsquelleAutor Paul
3

Eh bien, je ne sais pas si les réponses ici ont aidé à tout le monde ou pas, mais voici un simple CSS truc qui serait certainement vous aider à désactiver les faisant glisser et en sélectionnant des textes sur une page HTML.

Sur votre <body> tag ajouter ondragstart="return false". Cela va désactiver le faisant glisser des images. Mais si vous aussi vous voulez désactiver la sélection de texte, puis ajouter onselectstart="return false".

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

InformationsquelleAutor Abhisek Das
3
```
<img draggable="false" src="images/testimg1.jpg" alt=""/>
```
- ne fonctionne pas dans firefox si .
InformationsquelleAutor Mustafa

Vous pouvez envisager de ma solution la meilleure. La plupart des réponses ne sont pas compatible avec les anciens navigateurs comme IE8 depuis e.preventDefault() ne sera pas pris en charge ainsi que ondragstart événement. Pour faire de la croix-navigateur compatible vous avez à bloc mousemove événement 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 a travaillé, même pour IE8

InformationsquelleAutor CodeGems

3

Définir les propriétés CSS suivantes à l'image:
```
user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
```
- Ne semble pas fonctionner sur Firefox (à l'aide de Firefox sur Mac (69)
InformationsquelleAutor Omid Farvid
2

Bien, c'est possible, et les autres réponses postées sont parfaitement valables, mais vous pouvez prendre une approche par force brute et de prévenir le comportement par défaut de mousedown sur les images. Qui, est de commencer à glisser l'image.

Quelque chose comme ceci:
```
window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { return false; };
    }  
};  
```
InformationsquelleAutor Alex

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

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

InformationsquelleAutor dtothefp

1

jQuery:
```
$('body').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});
```
Vous pouvez remplacer le corps sélecteur avec tout autre contenant que les enfants vous voulez éviter d'être glissés et déposés.

InformationsquelleAutor Lis
0

Réponse est simple:

<body oncontextmenu="return false"/> - désactiver le clic droit
<body ondragstart="return false"/> - désactiver la souris en faisant glisser
<body ondrop="return false"/> de désactiver la souris tomber

InformationsquelleAutor Gain

-1

J'ai fait la propriétés css montré ici, ainsi que de surveiller le ondragstart avec le code javascript suivant:

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

InformationsquelleAutor Alocus

-2

De voler de mes propres réponse, il suffit d'ajouter un élément totalement 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 âgés.

InformationsquelleAutor Sablefoste
-2

Vous pouvez utiliser le code en ligne pour cette

HTML:
```
<img draggable="false" src="http://www.ourkanpur.com/images/logo.png">
```
Et la deuxième option est l'utilisation extérieure ou sur la page css

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;
}
```
HTML:
```
<img src="http://www.ourkanpur.com/images/logo.png">
```
Les deux fonctionnent Correctement
Je m à l'aide de css externe, sur ce site (Cliquez Ici)
- Cela a été répondu avant ...
- Aucune de ces semblent fonctionner sur Firefox (à l'aide de Firefox sur Mac (69)
InformationsquelleAutor Abhishek kamal

Vous devez vous connecter pour publier un commentaire.