Draggabilly : utilisez et jouez simplement avec le drag & drop d'HTML 5

Le , par FirePrawn, Expert éminent sénior
Utiliser et jouer simplement avec le drag & drop d'HTML5
Pour 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… 
});
Plusieurs options sont disponibles :
  • 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 aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :
Offres d'emploi IT
Ingénieur conception en électronique de puissance H/F
Safran - Ile de France - Moissy-Cramayel (77550)
Architecte et intégrateur scade/simulink H/F
Safran - Ile de France - Vélizy-Villacoublay (78140)
Responsable transverse - engagement métiers H/F
Safran - Ile de France - Corbeil-Essonnes (91100)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -