Utiliser et jouer simplement avec le drag & drop d'HTML5Pour rendre vos pages Web plus attractives
Draggabilly est un script JavaScript très léger (environ 10 ko) qui va vous simplifier la vie pour utiliser le drag & drop.
L'installation est très simple, il vous suffit de télécharger le fichier et de l'inclure dans les pages Web où vous souhaitez l'utiliser.
L'utilisation qui s'en suit est elle aussi très facile :
| Code : | Sélectionner tout |
1 2 3 4 | var elem = document.querySelector('#draggable');
var draggie = new Draggabilly( elem, {
// options…
}); |
- containment: #container qui définit le conteneur de l'élément déplaçable ;
- handle : .handle qui spécifie sur quel élément l'interaction démarre.
Vous avez également trois événements différents : dragStart, dragMove et dragEnd.
Pour finir, lorsqu'un élément est en déplacement, le script lui ajoute la classe is-dragging ce qui vous permet de simplement modifier le CSS des éléments pendant leur déplacement.
Pour plus d'informations et une démonstration, je vous invite à consulter le site officiel.
Télécharger Draggabilly.Source : thechangelog.com
Et vous ?
Avez-vous déjà utilisé le drag & drop introduit en HTML5 ? Pensez-vous que les utilisateurs sont friands de ce genre d'animations ?
Vous avez lu gratuitement 9 articles depuis plus d'un an.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.