hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Ajouter Drag & Drop au 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 d' 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 JavaScript JavaScript.

Dragula est super facile à configurer et il est livré avec un tas de déclencheurs personnalisés pour les comportements des utilisateurs . Cela signifie que vous pouvez déclencher vos propres fonctions après que l'utilisateur fait glisser un élément, clique sur un élément ou réorganise n'importe quelle partie de la page.

Si vous jetez un coup d'œil à la démo en direct, vous trouverez quelques extraits de code, ainsi que des exemples utilisables .

L'installation Dragula nécessite uniquement 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, #left et #right, que vous voulez prendre en charge les éléments déplaçables. Vous devrez ajouter manuellement ces conteneurs à la fonction Dragula pour prendre en charge les méthodes de glisser-déposer.

Si vous n'avez pas une bonne compréhension des principes de base du développement frontal, vous aurez du mal à utiliser Dragula. Mais, le repo GitHub a beaucoup de bons exemples que vous pouvez suivre et même des extraits de code que vous pouvez copier .

Voici un exemple des documents GitHub pour savoir comment cibler les deux conteneurs (gauche et droit) :

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

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

Vous pouvez choisir de copier ou de déplacer des éléments, quel (s) conteneur (s) supporte (nt) les éléments déplacés et même les fonctions de rappel qui fonctionnent à travers différents comportements utilisateur tels que:

  • Planant au-dessus d'un conteneur
  • Premier clic et glisser l'événement
  • Déposer un événement
  • Déposer un élément hors des limites
  • Clonage d'un élément / conteneur en le faisant glisser

Cette bibliothèque prendra un peu de travail initial, mais si vous êtes familier avec JavaScript, cela devrait être une évidence.

Regardez sur la page de démonstration pour voir comment cela fonctionne et pour obtenir quelques idées d'exemples 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 .

Visualisez vos palettes de couleurs en ligne avec Speculo

Visualisez vos palettes de couleurs en ligne avec Speculo

Le processus de conception de maquette typique peut se sentir comme une corvée. Vous devez basculer entre Photoshop (ou Sketch) pour changer les couleurs, les polices, les styles, et les comparer tous pour voir ce que vous préférez.Si vous utilisez un outil comme Speculo, vous pourrez étudier et comparer dynamiquement les palettes de couleurs, directement dans votre navigateur. Ce

(Conseils techniques et de conception)

L'oeuvre 3D de J Desenhos est quelque chose que vous devez voir

L'oeuvre 3D de J Desenhos est quelque chose que vous devez voir

João A. Carvalho aka J Desenhos possède une page Facebook communautaire appelée Nas linhas do caderno, qui se traduit par "The Lines Notebook" (merci Google Translate!). Dans ce document, il partage des œuvres d'art étonnantes par de nombreux artistes talentueux, y compris son propre travail.João

(Conseils techniques et de conception)