Rendre des éléments déplaçables
Activez le glisser-déposer et gérez les événements associés.
Rendre des éléments déplaçables est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.
L’interface HTML de glisser-déposer
L’interface native de glisser-déposer permet aux utilisateurs de saisir des éléments et de les déposer ailleurs. Elle est pilotée par des événements : les éléments sources déclenchent des événements de glissement et les cibles de dépôt déclenchent leurs propres événements. Aucune bibliothèque n’est nécessaire.
L’attribut de glisser-déposer
Par défaut, seuls les liens et les images peuvent être déplacés. Ajoutez draggable="true" pour rendre n’importe quel élément déplaçable.
<div draggable="true" id="card">Drag me</div>Définir le glissement en JS
Vous pouvez activer ou désactiver ce comportement depuis un script grâce à la propriété draggable.
const card = document.getElementById("card");
card.draggable = true;L’événement de début du glissement
dragstart se déclenche au moment où le glissement commence. C’est ici que vous enregistrez ce qui est déplacé.
card.addEventListener("dragstart", (e) => {
console.log("Started dragging", card.id);
});Transporter des données avec dataTransfer
L’événement expose dataTransfer. Utilisez setData(format, value) dans dragstart pour associer une charge utile qui accompagne le glissement.
card.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", card.id);
});L’événement de glissement
drag se déclenche continuellement pendant le déplacement de l’élément. Utilisez-le avec modération : il peut se déclencher plusieurs fois par seconde.
card.addEventListener("drag", (e) => {
// fires repeatedly during the drag
});L’événement de fin du glissement
dragend se déclenche lorsque l’utilisateur relâche l’élément, que le dépôt ait réussi ou non. Utilisez-le pour réinitialiser le style de la source.
card.addEventListener("dragend", (e) => {
card.classList.remove("dragging");
});Marquer l’élément source
Un modèle courant consiste à ajouter une classe lors de dragstart et à la supprimer lors de dragend afin d’atténuer ou de mettre en évidence l’élément déplacé.
card.addEventListener("dragstart", () => card.classList.add("dragging"));
card.addEventListener("dragend", () => card.classList.remove("dragging"));Effets autorisés
Définissez effectAllowed dans dragstart pour déclarer les opérations valides : "copy", "move", "link" ou des combinaisons de celles-ci.
card.addEventListener("dragstart", (e) => {
e.dataTransfer.effectAllowed = "move";
});Attention pour les appareils tactiles
L’interface native offre une prise en charge limitée des interactions tactiles sur mobile. Pour les applications conçues d’abord pour le tactile, envisagez les événements de pointeur ou une bibliothèque spécialisée ; l’interface native est particulièrement adaptée aux ordinateurs de bureau.
Désactiver la sélection de texte
Le glissement peut sélectionner du texte accidentellement. Une petite règle CSS permet de garder des glissements propres.
/* CSS */
.draggable { user-select: none; }Vérification rapide
Vérifiez les notions fondamentales du glissement.
Récapitulatif : rendre des éléments déplaçables
Vous avez activé le glissement avec draggable="true", géré dragstart/drag/dragend, associé une charge utile via dataTransfer.setData, défini effectAllowed et stylisé la source. Ensuite : les cibles de dépôt.
Questions Fréquemment Posées
La leçon « Rendre des éléments déplaçables » est-elle gratuite ?
Oui — le texte complet de « Rendre des éléments déplaçables » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Rendre des éléments déplaçables » ?
Activez le glisser-déposer et gérez les événements associés. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer JavaScript Academy ?
Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Rendre des éléments déplaçables » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?
Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Rendre des éléments déplaçables
- Cibles de dépôt et dataTransfer
- Retour visuel pendant le glisser-déposer
- Glisser des fichiers dans la page