Aperçu de l'API
Comme à notre habitude, cette présentation de l'API Drag & Drop ne fait que survoler son fonctionnement, il s'agit d'une simple initiation. Cependant, soyez sûrs que vous y découvrirez les fonctionnalités les plus importantes, nous vous évitons ainsi d'étudier certains aspects qui ne vous seront que très peu utiles.
En temps normal, un élément d'une page Web ne peut pas être déplacé. Vous pouvez toujours essayer, vous ne pourrez faire qu'une sélection du contenu. Certains éléments, comme les liens ou les images, peuvent être déplacés nativement, mais vous ne pouvez pas interagir avec ce mécanisme en Javascript sans passer par la nouvelle API disponible dans la spécification HTML5.
Afin de rendre un élément déplaçable, il vous suffit d'utiliser son attribut draggable et de le mettre à true(que ce soit en HTML ou en Javascript). À partir de là, vous pouvez essayer de déplacer l'élément sans problème.
Vous risquez probablement de rencontrer des problèmes avec Firefox. En effet, ce navigateur nécessite une information supplémentaire que nous vous présenterons plus loin. Quant aux autres navigateurs, il se peut qu'ils soient nombreux à ne pas réussir à exécuter correctement ce code, tout simplement parce qu'ils ne supportent pas encore le Drag & Drop.
Parmi les huit événements que l'API Drag & Drop fournit, l'élément déplaçable peut en utiliser deux : dragstart et dragend.
L'événement dragstart se déclenche, comme son nom l'indique, lorsque l'élément ciblé commence à être déplacé. Cet événement est particulièrement utile pour initialiser certains détails utilisés tout au long du processus de déplacement.
Pour cela, il nous faudra utiliser l'objet dataTransfer que nous étudierons plus loin.
Quant à l'événement dragend, celui-ci permet de signaler à l'objet déplacé que son déplacement est terminé, que le résultat soit un succès ou non.
L'objet dataTransfer est généralement utilisé au travers de deux événements : dragstart et drop. Il peut toutefois être utilisé avec d'autres événements spécifiques au Drag & Drop.
Cet objet permet de définir et de récupérer les informations relatives au déplacement en cours d'exécution. Ici, nous n'allons aborder l'objet dataTransfer que dans le cadre de l'initialisation d'un déplacement, son utilisation pour la fin d'un processus de drag & drop sera étudiée plus tard.
L'objet dataTransfer permet de réaliser trois actions (toutes facultatives) :
La méthode setData() prend deux arguments en paramètres. Le premier est le type MIME des données (sous forme de chaîne de caractères) que vous allez spécifier dans le deuxième argument. Précisons que le deuxième argument est obligatoirement une chaîne de caractères, ce qui signifie que le type MIME qui sera spécifié n'a que peu d'intérêt, vous utiliserez généralement le type text/plain pour des raisons de simplicité :
draggableElement.addEventListener('dragstart', function(e) { e.dataTransfer.setData('text/plain', "Ce texte sera transmis à l'élément HTML de réception"); }, false); |
En temps normal, vous nous diriez probablement que cette méthode est inutile puisqu'il suffirait de stocker les données dans une variable plutôt que par le biais de setData(). Eh bien, en travaillant sur la même page oui, cependant le Drag & Drop en HTML5 possède la faculté de s'étendre bien au-delà de votre page Web actuelle et donc de faire un glisser-déposer d'une page à une autre, que ce soit d'un onglet à un autre ou bien même d'un navigateur à un autre ! Le transfert de données entre les pages Web n'étant pas possible (tout du moins pas sans « tricher »), il est utile d'utiliser la méthode setData().
Attention, l'utilisation de la méthode setData() est obligatoire avec Firefox ! Cela est stupide, car nous n'avons pas forcément quelque chose à y stocker, mais nous n'avons pas trop le choix. Utilisez donc le type MIME de votre choix et passez-lui une chaîne de caractères vide, comme ceci : setData('text/plain', '');.
La méthode setDragImage() est extrêmement utile pour qui souhaite personnaliser l'affichage de sa page Web ! Elle permet de définir une image qui se placera sous le curseur pendant le déplacement de l'élément concerné. La méthode prend trois arguments en paramètres. Le premier est un élément <img> contenant l'image souhaitée, le deuxième est la position horizontale de l'image et le troisième est la position verticale :
var dragImg = new Image(); // Il est conseillé de précharger l'image, sinon elle risque de ne pas s'afficher pendant le déplacement dragImg.src = 'drag_img.png';
document.querySelector('*[draggable="true"]').addEventListener('dragstart', function(e) {
e.dataTransfer.setDragImage(dragImg, 40, 40); // Une position de 40x40 pixels centrera l'image (de 80x80 pixels) sous le curseur
}, false); |
Un élément en cours de déplacement ne peut pas être déposé n'importe où, il faut pour cela définir une zone de « drop » (zone qui va permettre de déposer des éléments) qui ne sera, au final, qu'un simple élément HTML.
Les zones de drop prennent généralement en charge quatre événements :
Par défaut, le navigateur interdit de déposer un quelconque élément où que ce soit dans la page Web. Notre but est donc d'annuler cette action par défaut, et qui dit « annulation d'une action par défaut », ditpreventDefault() !
Cette méthode va devoir être utilisée au travers de l'événement dragover.
Prenons un exemple simple :
<div id="draggable" draggable="true">Je peux être déplacé !</div> <div id="dropper">Je n'accepte pas les éléments déplacés !</div> |
Comme vous pouvez le constater, cet exemple ne fonctionne pas, le navigateur affiche un curseur montrant une interdiction lorsque vous survolez le deuxième <div>. Afin d'autoriser cette action, il va vous falloir ajouter un code Javascript très simple :
document.querySelector('#dropper').addEventListener('dragover', function(e) { e.preventDefault(); // Annule l'interdiction de drop }, false); |
Avec ce code, le curseur n'affiche plus d'interdiction en survolant la zone de drop, cependant il ne se passe rien si nous relâchons notre élément sur la zone de drop. Cela est parfaitement normal, car c'est à nous de définir la manière dont la zone de drop doit gérer les éléments qu'elle reçoit.
Avant toute chose, pour agir suite à un drop d'élément, il nous faut détecter ce fameux drop, nous allons donc devoir utiliser l'événement drop (logique, n'est-ce pas ? 
), cela se fait de manière enfantine :
document.querySelector('#dropper').addEventListener('drop', function(e) { e.preventDefault(); // Cette méthode est toujours nécessaire pour éviter une éventuelle redirection inattendue alert('Vous avez bien déposé votre élément !'); }, false); |
Tant que nous y sommes, essayons les événements dragenter, dragleave et un petit oublié qui se nomme dragend :
var dropper = document.querySelector('#dropper');
dropper.addEventListener('dragenter', function() { dropper.style.borderStyle = 'dashed'; }, false);
dropper.addEventListener('dragleave', function() { dropper.style.borderStyle = 'solid'; }, false);
// Cet événement détecte n'importe quel drag & drop qui se termine, autant le mettre sur « document » : document.addEventListener('dragend', function() { alert("Un Drag & Drop vient de se terminer mais l'événement dragend ne sait pas si c'est un succès ou non."); }, false); |
Avant d'essayer ce code, il nous faut réfléchir à une chose : nous appliquons un style lorsque l'élément déplacé entre dans la zone de drop puis nous le retirons lorsqu'il en sort. Cependant, que se passe-t-il si nous relâchons notre élément dans la zone de drop ? Eh bien le style reste en place, car l'élément n'a pas déclenché l'événement dragleave. Il nous faut donc retirer le style en modifiant notre événement drop :
dropper.addEventListener('drop', function(e) { e.preventDefault(); // Cette méthode est toujours nécessaire pour éviter une éventuelle redirection inattendue alert('Vous avez bien déposé votre élément !');
// Il est nécessaire d'ajouter cela car sinon le style appliqué par l'événement « dragenter » restera en place même après un drop : dropper.style.borderStyle = 'solid'; }, false); |
Voilà tout, essayez donc maintenant de déplacer l'élément approprié à la fois dans la zone de drop et en-dehors de cette dernière :
L'objet dataTransfer a deux rôles importants lors de la fin d'un drag & drop. Le premier consiste à récupérer, grâce à la méthode getData(), le texte sauvegardé par setData() lors de l'initialisation du drag & drop.
Ici donc, rien de bien compliqué :
dropZone.addEventListener('drop', function(e) { alert(e.dataTransfer.getData('text/plain')); // Affiche le contenu du type MIME « text/plain » }, false); |
Quant au deuxième rôle, celui-ci consiste à récupérer les éventuels fichiers qui ont été déposés par l'utilisateur, car, oui, le drag & drop de fichiers est maintenant possible en HTML5 ! Cela fonctionne plus ou moins de la même manière qu'avec une balise <input type="file" />, il nous faut toujours accéder à une propriété files, sauf que celle-ci est accessible dans l'objet dataTransfer dans le cadre d'un drag & drop. Exemple :
dropZone.addEventListener('drop', function(e) { e.preventDefault();
var files = e.dataTransfer.files, filesLen = files.length, filenames = "";
for(var i = 0 ; i < filesLen ; i++) { filenames += '\n' + files[i].name; }
alert(files.length + ' fichier(s) :\n' + filenames); }, false); |
Imaginez maintenant ce qu'il est possible de faire avec ce que vous avez appris dans ce chapitre et le précédent ! Vous pouvez très bien créer un hébergeur de fichiers avec support du drag & drop, prévisualisation des images, upload des fichiers avec une barre de progression, etc. Les possibilités deviennent maintenant extrêmement nombreuses et ne sont pas forcément bien compliquées à mettre en place !
Créé avec HelpNDoc Personal Edition: Produire facilement des livres électroniques Kindle