Maison >interface Web >tutoriel CSS >Comment empêcher le glisser-déposer d'images en HTML ?

Comment empêcher le glisser-déposer d'images en HTML ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-02 10:16:30912parcourir

How to Prevent Image Drag and Drop in HTML?

Évitez le glisser-déposer d'image en HTML

Si vous cherchez à afficher une image sur votre page HTML mais que vous souhaitez empêcher les utilisateurs de en le faisant glisser, vous avez exploré diverses solutions en vain. Cet article vous guidera dans la désactivation du glissement d'image, permettant un redimensionnement tout en gardant le contrôle.

Identifiez simplement l'image à l'aide de son identifiant ou de sa classe unique. Ensuite, attribuez un écouteur d'événement à l'événement 'ondragstart'. Dans ce gestionnaire d'événements, renvoyez « false » pour interdire le comportement de glisser-déposer par défaut du navigateur. Voici un exemple utilisant Vanilla JavaScript :

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

Alternativement, si vous utilisez jQuery, vous pouvez opter pour le code suivant :

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

En implémentant ces techniques, vous désactivez efficacement le glissement d'image dans votre page HTML tout en permettant le redimensionnement en fonction de vos besoins spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn