7 ressources Javascript pour mettre en place du drag and drop

Publié le

Vous souhaitez mettre votre solution en avant en haut de cet article ? Contactez-nous



Je ne prends pas vraiment de risque en annonçant que le drag n drop est une des fonctionnalités les plus agréables à trouver sur un site mobile. Non seulement le geste est naturel sur écran tactile, mais il permet aussi de retranscrire des actions souvent beaucoup plus lourdes (des select, par exemple) qui ne passent pas toujours de manière très agréable sur petit écran.

Si la mise en place de glisser-déposer vous intéresses pour vos prochaines applications, je vous propose cette liste de 7 ressources Javascript simple à mettre en place et à utiliser.

Sortable

Sortable, library javascript pour drag and drop

Interact

Interact, library javascript pour drag and drop

Dragula

Dragula, library javascript pour drag and drop

Draggabilly

Draggabilly, library javascript pour drag and drop

jQuery UI

J'ai longuement hésité avant de mettre jquery UI dans cette liste de par la taille de la library, mais force est de constater qu'elle fait du Drag'n drop de manière très simple à mettre en place. Pour un simple besoin de glisser-déposer, je choisirais néanmoins une des autres librarys propose plus haut.

jQuery UI, library javascript pour drag and drop

HTML5

Sinon, vous pouvez aussi y aller sans aucune bibliothèque, avec du simple HTML5/javascripts ! En effet, le HTML5 gère nativement le drag and drop. Pour vous aider, un petit exemple sur codepen.

Exemple de drag and drop en HTML5

Gridster

Dans un autre registre, Gridster propose du drag n drop allié à une grille et un système de redimensionnement de blocs. La récupération de l'arrangement actuel se fait très simplement en Javascript, ce qui permet d'imaginer des administrations très intéressantes sur un style "metro".

Gridster, library javascript pour drag and drop

By Benjamin Sanchez

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *