Maison > Article > interface Web > Création d'un élément déplaçable à l'aide de HTML, CSS et JavaScript

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

WBOYoriginal: 2024-08-06 15:14:501200parcourir

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 :

Creating a Draggable Element Using HTML, CSS, and JavaScript

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 :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Element</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="draggable" id="draggableElement">Drag me!</div>
<script src="script.js"></script>
</body>
</html>

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.

Styliser 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 glisser : La fonction startDragging est déclenchée lorsque l'utilisateur appuie sur le bouton de la souris enfoncé sur l'élément. Cette fonction :

Empêche le comportement par défaut de l'événement en utilisant e.preventDefault().
Calcule les décalages en soustrayant la position du coin supérieur gauche de l'élément de la position de la souris.
Ajoute la classe glisser pour changer le curseur.
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 :

Empêche le comportement par défaut de l'événement.
Calcule la nouvelle position de l'élément en fonction de la position de la souris et des décalages.
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 se déclenche lorsque l'utilisateur relâche le bouton de la souris. Cette fonction :

Supprime la classe glisser pour ramener le curseur à son état d'origine.
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!

JavaScript css html define for while select using class Property Event function default dom this position border background

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

Article précédent：CSS pour les formulaires : améliorer l'expérience utilisateurArticle suivant：CSS pour les formulaires : améliorer l'expérience utilisateur

Articles Liés

Voir plus