Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

Le , par FirePrawn

23PARTAGES

1  0 
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 ?

Une erreur dans cette actualité ? Signalez-le nous !