Ajouter un glisser / déposer à un site Web facilement avec Dragula

Vous recherchez une bibliothèque gratuite pour gérer les fonctionnalités de glisser-déposer? ensuite Dragula est la seule ressource dont vous aurez besoin.

Ce script gratuit vous permet ajouter des fonctionnalités de glisser-déposer pour n'importe quel élément de votre page. Cela inclut la prise en charge des frameworks React & AngularJS, ainsi que du JavaScript vanille.

Dragula est super facile à installer et vient avec un tas de déclencheurs personnalisés pour les comportements des utilisateurs. Cela signifie que vous pouvez activer vos propres fonctions après que l'utilisateur ait fait glisser un élément, cliqué sur un élément ou réorganisé une partie de la page..

Si vous regardez la démo en direct, vous trouverez quelques extraits de code, de même que échantillons utilisables.

La configuration de Dragula ne nécessite qu'un seul fichier JavaScript pour le faire fonctionner. Bien que, les options supplémentaires peuvent être un peu déroutant.

Par exemple, disons que vous avez deux conteneurs, #la gauche et #droite, que vous souhaitez prendre en charge les éléments déplaçables. Vous aurez besoin de ajouter manuellement ces conteneurs à la fonction Dragula supporter les méthodes de glisser / déposer.

Si vous ne comprenez pas bien les principes fondamentaux du développement frontal, vous aurez du mal à utiliser Dragula. Mais, le repo GitHub a beaucoup de d'excellents exemples que vous pouvez suivre avec et même extraits de code que vous pouvez copier.

Voici un exemple de la documentation GitHub pour savoir comment cibler les deux conteneurs (gauche et droit):

 dragula ([document.querySelector ('# left'), document.querySelector ('# right')]); 

Notez que si vous cherchez plus loin sur la page GitHub, vous trouverez une énorme liste d'options vous pouvez passer à cette fonction.

Tu peux choisir s'il faut copier ou déplacer des éléments, quel (s) conteneur (s) supporte les éléments glissés et même fonctions de rappel qui fonctionnent à travers différents comportements des utilisateurs tels que:

• Survoler un conteneur
• Événement click & drag initial
• Événement Drop
• Déposer un élément en dehors des limites
• Cloner un élément / conteneur en le faisant glisser

Cette bibliothèque prendra un travail initial mais si vous connaissez JavaScript, cela devrait être une évidence..

Regardez la page de démonstration pour regarde comment ça marche et à obtenez quelques idées d'échantillons de code. Dragula est une bibliothèque massive et c'est probablement le meilleur script open-source pour gérer le glisser-déposer, avec la plus large gamme de personnalisation.