7 ressources Javascript pour mettre en place du drag and drop

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

Interact

Dragula

Draggabilly

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.

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.

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".