Drag n'drop & Data Transfer API : Démo HTML5
Mise à jour : 2017-01-22
Cette fonctionnalité faisait cruellement défaut et de nombreux moyens plus ou moins efficaces
et compatibles tentaient d'y remédier (à base de tonnes de JavaScript).
Désormais une fonctionnalité native permet de réaliser ce type d'opération.
Les capteurs d'évènements
- drag : invoqué tout au long du déplacement
- dragend : invoqué à la fin de l'opération
- dragenter : invoqué lorsqu'un objet entre dans une zone drag n' drop
- dragleave : invoqué lorsqu'un objet sort d'une zone drag n' drop
- dragover : invoqué lorsqu'un objet survole une zone drag n' drop
- dragstart : invoqué lorsqu'un objet est saisi
- drop : invoqué lorsqu'un objet est laché sur une zone drag n' drop
API Data Transfer
- setData : défini l'objet à transférer
- getData : récupère l'objet à transférer
Notes sur le tuto
- L'utilisation de "preventDefault()" dans la fonction "drop" permet de ne pas activer l'objet déplacé, si celui a une action associée.
- La déclaration de l'attribut "draggable" dans l'élément à déplacer ne semble pas obligatoire.
- Limitations :
- Les évènements "ondrag*" ne sont pas envoyés sur écran tactile, mais l'utilisation de Touch Events permet d'y remédier.
- Testé sous IE 11/Windows 8.1 mobile.
- Voir aussi :
Exemple de code HTML5
Glissez/Lachez les navigateurs dans une zone :<br> <div class="box" ondragover="return false" ondrop="drop(this, event)" id="box"> <p>Navigateurs compatibles</p> </div> <div style="float:left"><br> <img src="../img/logos/chrome1.png" id="cr" draggable="true" ondragstart="drag(this, event)"><br> <img src="../img/logos/firefox1.png" id="ff" draggable="true" ondragstart="drag(this, event)"><br> <img src="../img/logos/ie1.png" id="ie" ondragstart="drag(this, event)"><br> <img src="../img/logos/safari1.png" id="sf" ondragstart="drag(this, event)"> </div> <div class="box" ondragover="return false" ondrop="drop(this, event)"> <p>Navigateurs incompatibles</p> </div> <div style="clear:both"></div> <script> function drag(target, event) { event.dataTransfer.setData("text", target.id); } function drop(target, event) { navId = event.dataTransfer.getData("text"); target.appendChild(document.getElementById(navId)); event.preventDefault(); } </script>
Démonstration du résultat HTML5
Glissez/Lachez les navigateurs dans une zone :
Navigateurs compatibles
Navigateurs incompatibles
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script> isAttributeSpecified("cr", "draggable") isAttributeSpecified("cr", "ondragstart") isAttributeSpecified("box","ondragover") isAttributeSpecified("box","ondrop") </script>