6 ressources Javascript pour mettre en place du drag and drop

Le 28/04/2015

Dans Développement

Nous ne prenons pas vraiment de risque en annonçant que le drag and 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éresse pour vos prochaines applications, nous vous proposons cette liste de  6 ressources JavaScript simple à mettre en place et à utiliser.

Interact

Dragula

Draggabilly

jQuery UI

Nous avons longuement hésité avant de mettre jquery UI dans cette liste de par la taille de la library, mais forcé de constater qu'elle fait du drag and drop de manière très simple à mettre en place. Pour un simple besoin de glisser-déposer, néanmoins nous vous conseillons une des autres librarys proposées dans cette sélection.

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