Création d'un élément déplaçable à l'aide de HTML, CSS et JavaScript

Dans le développement Web moderne, l'interactivité est essentielle pour engager les utilisateurs et créer une expérience utilisateur dynamique. Une façon d’ajouter de l’interactivité consiste à rendre les éléments déplaçables. Dans cet article, nous explorerons comment créer un élément déplaçable en utilisant HTML, CSS et JavaScript.

sortie :

Structure HTML
Commençons par la structure HTML de base. Nous allons créer un simple élément div que nous souhaitons rendre déplaçable. Voici le code :

       
  
Drag me!
   

Dans ce code, nous avons un div avec la classe draggable et un ID draggableElement. Ce sera l'élément que nous rendrons déplaçable.

Style de l'élément déplaçable avec CSS

.draggable { position: absolute; cursor: grab; width: 100px; height: 100px; background-color: #007bff; color: #fff; text-align: center; line-height: 100px; border-radius: 8px; user-select: none; } .draggable.dragging { cursor: grabbing; }

Dans ce CSS, nous définissons la classe .draggable pour styliser notre élément. Nous définissons sa position sur absolue afin de pouvoir le déplacer librement sur la page. La propriété du curseur est définie sur grab pour indiquer que l'élément peut être déplacé. Nous définissons également la largeur, la hauteur, la couleur d'arrière-plan, la couleur du texte, l'alignement du texte et la hauteur de ligne pour centrer le texte verticalement et horizontalement. Le rayon de bordure est ajouté pour les coins arrondis et la sélection par l'utilisateur : aucun est utilisée pour empêcher la sélection de texte lors du glissement. Lire la suite

Ajout d'interactivité avec JavaScript

let draggableElement = document.getElementById('draggableElement'); let offsetX, offsetY; draggableElement.addEventListener('mousedown', startDragging); draggableElement.addEventListener('mouseup', stopDragging); function startDragging(e) { e.preventDefault(); offsetX = e.clientX - draggableElement.getBoundingClientRect().left; offsetY = e.clientY - draggableElement.getBoundingClientRect().top; draggableElement.classList.add('dragging'); document.addEventListener('mousemove', dragElement); } function dragElement(e) { e.preventDefault(); let x = e.clientX - offsetX; let y = e.clientY - offsetY; draggableElement.style.left = x + 'px'; draggableElement.style.top = y + 'px'; } function stopDragging() { draggableElement.classList.remove('dragging'); document.removeEventListener('mousemove', dragElement); }

Démarrer le glissement :La fonction startDragging est déclenchée lorsque l'utilisateur appuie sur le bouton de la souris sur l'élément. Cette fonction :

1. Empêche le comportement par défaut de l'événement en utilisant e.preventDefault().
2. Calcule les décalages en soustrayant la position du coin supérieur gauche de l'élément de la position de la souris.
3. Ajoute la classe glisser pour changer le curseur.
4. Ajoute un écouteur d'événement pour l'événement mousemove au document, ce qui déclenchera la fonction dragElement.

Drag Element :La fonction dragElement est déclenchée lorsque la souris bouge. Cette fonction :

1. Empêche le comportement par défaut de l'événement.
2. Calcule la nouvelle position de l'élément en fonction de la position de la souris et des décalages.
3. Mise à jour les propriétés CSS gauche et supérieure de l'élément pour le déplacer vers la nouvelle position.

Stop Dragging :La fonction stopDragging est déclenchée lorsque l'utilisateur relâche le bouton de la souris. Cette fonction :

1. Supprime la classe glisser pour ramener le curseur à son état d'origine.
2. Supprime l'écouteur d'événement mousemove du document pour arrêter le glissement. En savoir plus

conclusion :
En comprenant les bases des écouteurs d'événements et de la manipulation du DOM, nous pouvons ajouter de l'interactivité à nos projets Web, améliorant ainsi l'expérience utilisateur.

Lire l'article complet – cliquez ici

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!