Création d'éléments glisser-déposer avec du JavaScript vanilla pur

Shreyas Patil2022-08-04 · 11 min read

Création d'éléments glisser-déposer avec du JavaScript vanilla pur

JavaScript est l'un des langages de programmation les plus populaires, doté de plus de 24 frameworks et d'environ 84 bibliothèques. C'est le seul langage de programmation intrinsèquement pris en charge par tous les navigateurs. De plus, le langage prend en charge le typage dynamique et convient parfaitement au rendu et à l'animation. Vous pouvez exploiter JavaScript pour ajouter un comportement interactif au front-end, contrôler le back-end, créer des applications web et mobiles, et bien plus encore. La possibilité d'ajouter des effets à n'importe quel site web et de le rendre personnalisable fait de ce langage un favori des développeurs du monde entier.

Dans ce guide, nous allons vous guider à travers les étapes de création d'éléments de glisser-déposer en utilisant du JavaScript Vanilla pur. De plus, nous irons encore plus loin et construirons une application « Morning Scheduler » en utilisant les gestionnaires d'événements de l'API Drag and Drop HTML.

Prérequis

Pour suivre ce tutoriel, vous devez avoir :

Les bases de JavaScript.
Un aperçu de HTML et CSS sera un grand avantage.

Étape 1 : Créer un nouveau projet

Commencez par créer un conteneur avec deux éléments enfants. Nous utiliserons le premier élément enfant pour le glisser et le second élément enfant pour stocker les éléments glissés.

Remarque : Dans ce tutoriel, nous traiterons les conteneurs comme un espace de stockage pour conserver tous les éléments glissés. En termes simples, tous les éléments glissés depuis le premier enfant seront déposés dans le second enfant.

$ mkdir drag-and-drop-demo

1	$ mkdir drag-and-drop-demo

Ensuite, utilisez la commande cd pour changer de répertoire vers le dossier drag-and-drop-demo :

$ cd drag-and-drop-demo

1	$ cd drag-and-drop-demo

Étape 2 : Configuration initiale

Dans ce tutoriel, nous allons créer des fichiers HTML, CSS et JavaScript et les connecter. Tout d'abord, nommez les fichiers index.html, styles.css, et scripts.js respectivement.

Ensuite, ajoutez le titre « My Morning Planner » dans le fichier index.html :

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>My Morning Planner</title>
    </head>

    <body>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>My Morning Planner</title>

</head>

<body>

</body>

</html>

Ensuite, liez le CSS et ajoutez le JavaScript au HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="styles.css">
        <script src="script.js" defer></script>
        <title>My Morning Planner</title>
    </head>

    <body>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>My Morning Planner</title>

</head>

<body>

</body>

</html>

Maintenant, nous allons créer un conteneur initial et ajouter l'élément que nous voulons glisser-déposer. Assurez-vous de définir l'attribut draggable="true", et ajoutez la liste des éléments que vous souhaitez glisser ou déposer.

Ensuite, ajoutez les lignes de code suivantes dans les <body> balises :

<!DOCTYPE html>

<html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
    <title>Mon planificateur du matin</title>
</head>

<body>
    <div class="container">
    <h1><center>MON PLANIFICATEUR DU MATIN</center></h1>
    <h2 class="draggable" draggable="true">Aller à la salle de sport</h2>
    <h2 class="draggable" draggable="true">Lire pendant 30 minutes</h2>
    <h2 class="draggable" draggable="true">Préparer des flocons d'avoine</h2>
</div>

<div class="container">
    <h2 class="draggable" draggable="true">Prendre une douche froide</h2>
    <h2 class="draggable" draggable="true">Commencer ma journée</h2>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Mon planificateur du matin</title>

</head>

<body>

<h1><center>MON PLANIFICATEUR DU MATIN</center></h1>

<h2 class="draggable" draggable="true">Aller à la salle de sport</h2>

<h2 class="draggable" draggable="true">Lire pendant 30 minutes</h2>

<h2 class="draggable" draggable="true">Préparer des flocons d'avoine</h2>

</div>

<h2 class="draggable" draggable="true">Prendre une douche froide</h2>

<h2 class="draggable" draggable="true">Commencer ma journée</h2>

</div>

</body>

</html>

Enregistrez et fermez le fichier index.html. Après cela, essayez d'ouvrir le fichier index.html dans votre navigateur et vous verrez une page s'ouvrir :

Ensuite, stylisons notre fichier index.html en utilisant CSS pour le rendre présentable.

Étape 3 : Stylisation avec CSS

Ensuite, ajoutez des styles sur tous les éléments que nous avons inclus dans notre fichier index.html :

body {
    margin: 0;
}

.container {
    background-color: #DEB887;
    padding: 1rem;
    margin-top: 1rem;
}

.draggable {
    padding: 1rem;
    background-color: #FAF0E6;
    border: 1px solid #708090;
    cursor: move;
}

body {

margin: 0;

}

.container {

background-color: #DEB887;

padding: 1rem;

margin-top: 1rem;

}

.draggable {

padding: 1rem;

background-color: #FAF0E6;

border: 1px solid #708090;

cursor: move;

}

Essayez d'ouvrir le fichier index.html dans votre navigateur pour voir le résultat :

Creating Drag and Drop Elements with Pure, Vanilla JavaScript 1

Bien que nous ayons terminé la structuration et ajouté des styles, les éléments sont toujours statiques. Cela signifie que nous ne pouvons pas déplacer ou faire défiler les éléments tant que nous ne leur ajoutons pas de fonctionnalités dynamiques. Dans l'étape suivante, nous accueillerons JavaScript et les comportements dynamiques.

Étape 4 : Présentation de JavaScript

Dans cette étape, nous allons introduire JavaScript et rendre tous les éléments de glissement fonctionnels. Dans le fichier JS, définissez les éléments dont nous allons avoir besoin. Définissons draggable et containers pour glisser et déposer des éléments respectivement.

Ajoutez les deux lignes de code dans le fichier scripts.js :

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')

1 2	const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container')

Ensuite, configurez tous les écouteurs d'événements. Commencez par ajouter l'élément “dragstart” comme premier écouteur d'événement pour ajouter la liste de classes. De même, ajoutez l'élément “dragend” comme second écouteur d'événement pour retirer la liste de classes.

Attachez les EventListeners suivants dans votre fichier scripts.js :

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')

draggables.forEach(draggable => {
    draggable.addEventListener('dragstart', () => {
        draggable.classList.add('dragging')
    })

draggable.addEventListener('dragend', () => {
    draggable.classList.remove('dragging')
    })
})

const draggables = document.querySelectorAll('.draggable')

const containers = document.querySelectorAll('.container')

draggables.forEach(draggable => {

draggable.addEventListener('dragstart', () => {

draggable.classList.add('dragging')

})

draggable.addEventListener('dragend', () => {

draggable.classList.remove('dragging')

})

Ensuite, ajoutez l' “dragover” EventListener pour le survol et le déplacement de nos éléments. Définissez l'élément draggable actuel en utilisant le querySelector puis ajoutez l'élément draggable au conteneur actuel :

// …
containers.forEach(container => {
    container.addEventListener('dragover', () => {
        const draggable = document.querySelector('.dragging')
    })
})

// …

containers.forEach(container => {

container.addEventListener('dragover', () => {

const draggable = document.querySelector('.dragging')

})

Par défaut, le dépôt à l'intérieur d'un élément est désactivé. Utilisez e.preventDefault pour l'activer :

// …
containers.forEach(container => {
    container.addEventListener('dragover', e => {
        e.preventDefault()
        const draggable = document.querySelector('.dragging')
        container.appendChild(draggable)
    })
})

// …

containers.forEach(container => {

container.addEventListener('dragover', e => {

e.preventDefault()

const draggable = document.querySelector('.dragging')

container.appendChild(draggable)

})

Ensuite, créez un élément pour déterminer le positionnement de la souris. Commencez par créer une fonction getDragAfterElement qui prendra deux paramètres. Le premier sera un container et le second paramètre y s'occupera de la position verticale de la souris. Maintenant, utilisez la fonction querySelectorAll pour obtenir nos éléments draggables. Définissez draggableElements pour tous les éléments draggables à l'intérieur du conteneur :

// …
function getDragAfterElement(container, y) {
    const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]
}

// …

function getDragAfterElement(container, y) {

const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]

}

Ensuite, appelez une fonction reduce qui va boucler à travers la liste des éléments draggables et spécifier également l'élément unique après le curseur de la souris. Ensuite, renvoyez la fonction reduce en ajoutant le premier élément comme closest et le second comme un child. De plus, déterminez l' offset et ajoutez des conditions.

Ajoutez les lignes de code suivantes dans le scripts.js fichier :

// …
    return draggableElements.reduce((closest, child) => {
        const box = child.getBoundingClientRect()
        const offset = y - box.top - box.height / 2
        if (offset < 0 && offset > closest.offset){
            return { offset: offset, element: child }
        } 
        else {
            return closest
        }
    }, { offset: Number.NEGATIVE_INFINITY}).element
}

// …

return draggableElements.reduce((closest, child) => {

const box = child.getBoundingClientRect()

const offset = y - box.top - box.height / 2

if (offset < 0 && offset > closest.offset){

return { offset: offset, element: child }

}

else {

return closest

}

}, { offset: Number.NEGATIVE_INFINITY}).element

}

Dans la dernière partie, nous allons définir des conditions et vérifier le AfterElements. Vérifiez le AfterElements en utilisant if-else conditions, et s'il est défini sur null, ajoutez un enfant à la fin de la liste en utilisant appendChild. Sinon, ajoutez l'élément draggable et afterElement comme paramètres dans la insertBefore fonction.

Incluez ceci dans le scripts.js fichier :

// … 
containers.forEach(container => { 
    container.addEventListener('dragover', e =>{ 
        e.preventDefault() 
        const afterElement = getDragAfterElement(container, e.clientY) 
        const draggable = document.querySelector('.dragging') 
        if (afterElement == null) { 
            container.appendChild(draggable) 
        } 
        else {  
            container.insertBefore(draggable, afterElement) 
        } 
    }) 
})

// …

containers.forEach(container => {

container.addEventListener('dragover', e =>{

e.preventDefault()

const afterElement = getDragAfterElement(container, e.clientY)

const draggable = document.querySelector('.dragging')

if (afterElement == null) {

container.appendChild(draggable)

}

else {

container.insertBefore(draggable, afterElement)

}

})

Maintenant que la configuration nécessaire est faite, ouvrez votre navigateur et lancez index.html dans votre navigateur. Vous verrez la page « My Morning Scheduler » avec des options de glisser-déposer. La ligne blanche au milieu sert de pont pour différencier les tâches déjà accomplies de celles qui restent à faire :

Conclusion

Le glisser-déposer est une excellente option à utiliser sur les sites web modernes. Dans ce guide, nous avons utilisé une poignée de gestionnaires d'événements pour rendre le tutoriel facile pour les débutants. Il y a huit gestionnaires d'événements au total et nous vous encourageons à les utiliser au fur et à mesure de votre progression. Une fois que vous serez à l'aise avec les fonctions et le code utilisés dans ce tutoriel, vous pourrez approfondir d'autres sujets JavaScript comme jQuery et commencer à explorer. Vous pouvez également essayer de créer une application To-Do, un suivi de progression hebdomadaire en utilisant les fonctionnalités de date et d'heure de JavaScript, et d'autres applications en utilisant les concepts que vous venez d'apprendre.

Pour en savoir plus sur JavaScript et le développement web, consultez ces ressources de notre blog:

Bonne informatique !

Shreyas Patil

Auteur · CloudSigma

Preslav Dobrev est un designer créatif chez CloudSigma, axé sur une identité commerciale cohérente à travers des canaux marketing traditionnels et innovants. Il excelle à fusionner la vision artistique avec le marketing stratégique pour créer des récits de marque percutants.

Création d'éléments glisser-déposer avec du JavaScript vanilla pur

Prérequis

Étape 1 : Créer un nouveau projet

Étape 2 : Configuration initiale

Étape 3 : Stylisation avec CSS

Étape 4 : Présentation de JavaScript

Conclusion

Shreyas Patil

Commentaires