fb
Schedule a Meeting

Draggable By Shopify – Nouveau meilleur outil de développement Shopify pour le développeur

This post is also available in: English (Anglais) Deutsch (Allemand) Italiano (Italien)

Qu’est-ce que Draggable?

Comme nous sommes tous conscients que Shopify est en constante évolution et apporte de nouvelles fonctionnalités pour ses utilisateurs de temps en temps. Draggable est la nouvelle édition dans le kitty et est un outil de développeur qui fournit une bibliothèque modulaire glisser-déposer qui permet aux utilisateurs de commencer à construire les fonctionnalités dont ils ont besoin. Les utilisateurs peuvent commencer petit et continuer à ajouter si nécessaire.

Draggable offre aux utilisateurs des fonctionnalités de glisser-déposer, de balisage accessible, de récommander rapidement les DOM et d’autres fonctionnalités pour faciliter la tâche des utilisateurs de Shopify. Il fonctionne à travers la plupart des supports d’interaction, tels que la souris, le toucher, et le toucher de force, et avec le support accessible clavier à venir bientôt.

Avec Draggable on peut obtenir un contrôle complet sur le comportement de glisser et de chute! Une des fonctions de Draggable est qu’il intègre les événements de navigateur natif dans une API complète pour créer une expérience de glisser-déposer personnalisée.

Draggable est également livré avec des modules supplémentaires: Sortable, Swappable, et Droppable. Draggable, mais ne le travail de levage lourd comme la création d’un miroir, l’émission d’événements, la gestion des événements capteur, et de rendre les éléments draggable.

Les modules supplémentaires ont une interface API similaire car ils sont construits sur le dessus de Draggable. Certaines de ses caractéristiques sont :

Caractéristiques de Draggable :

  • Fonctionne avec des événements de traînée, de souris, de toucher et de contact de force natifs
  • En s’accrochant au cycle de vie de l’événement draggable, il peut étendre le comportement de traînage
  • Étendre la détection de traînée en ajoutant des capteurs pour faire glisser
  • La bibliothèque cible ES6 d’abord
  • Visibilité instantanée de vos actions et de leurs résultats

Swappable

Le switcheroo classique permet aux utilisateurs de faire glisser un élément sur un autre et de les regarder échanger des places dans le DOM. Cette fonctionnalité convient le mieux lorsque les dimensions de la disposition doivent être conservées.

Triables

Avec cette fonctionnalité, vous pouvez maintenant trier les nœuds DOM avec style. Faites glisser les articles d’une collection d’un endroit à l’autre et affichez tout ce qui se passe en place. Il est rapide et réactif qui ne laissera pas votre portefeuille de performance attaché pour les cadres et vous donne exactement ce que vous recherchez.

Collisionnable

Démarrez votre voyage de développement de jeu et injectez une certaine détection de collision en elle. Collidable est une fonctionnalité qui empêche les éléments draggables de se chevaucher, éliminant les événements de collision lorsque l’élément source traîné entre et sort d’une zone restreinte.

Voici quelques-unes des propriétés et avantages de l’outil :

Accessible

L’accessibilité drag & drop est un outil délicat et très utile. Alors que les navigateurs continuent de travailler sur une solution native fiable, Draggable facilite en fournissant tous les attributs aria appropriés pour être disponibles aux bons endroits. En outre, vous n’avez pas besoin d’avoir des connaissances intensives sur les codes pour utiliser cet outil.

L’une des principales raisons pour lesquelles l’option glisser-déposer est créée est de donner une occasion à ceux qui ont moins d’expertise technique dans ce domaine.

Vaste

Draggable est facilement extensible. Si vous avez besoin d’un module qui n’est pas déjà disponible, vous pouvez écrire un module personnalisé pour la fonctionnalité dont vous avez besoin et le soumettre à GitHub repo pour examen. Il y a de fortes chances que beaucoup d’autres personnes comme vous aient besoin de la même fonctionnalité et que vous puissiez la partager avec d’autres personnes.

Animation

Rien n’agace le développeur plus que d’interrompre leur conception personnelle. Draggable n’est pas un tel outil pour entrer dans la voie de la touche personnelle d’un concepteur et voler le spectacle en forçant tous les styles d’animation indisciplinés. Vous pouvez simplement prendre votre choix à partir d’une portion de sélecteurs CSS et le style au désir de votre cœur. Vous pouvez concevoir votre site web selon vos exigences.

Où l’obtenir?

L’outil est toujours dans sa version bêta et peut être installé via npm.

npm installer @Shopify/draggable –enregistrer

ou par fil:

fils ajouter @Shopify/draggable

Pour plus de documentation, vous pouvez renvoyer les liens suivants pour chaque module dans leurs répertoires respectifs.

Pour plus de consultations et de développements pour votre magasin Shopify, vous pouvez contacter WebBee Global. Les équipes de développement de WebBee ont une connaissance approfondie de la plate-forme Shopify et peuvent vous guider dans la bonne direction vers l’utilisation de ses fonctionnalités.

Scroll to top
Schedule a Meeting
close slider