fb
Schedule a Meeting

Draggable By Shopify – Neues Best Shopify Development Tool für Entwickler

This post is also available in: English (Englisch) Français (Französisch) Italiano (Italienisch)

Was ist Draggable?

Wie wir alle wissen, dass Shopify sich ständig weiterentwickelt und bringt neue Funktionen für seine Nutzer hin und wieder. Draggable ist die neue Ausgabe in der Kitty und ist ein Entwickler-Tool, das eine modulare Drag-and-Drop-Bibliothek bietet, die es den Benutzern ermöglicht, mit dem Aufbau der Funktionen zu beginnen, die sie benötigen. Die Benutzer können klein beginnen und bei Bedarf weiterhinzufügen.

Draggable bietet Benutzern Drag -and-Drop-Funktionalität, zugängliche Mark-up, schnelle DOM-Neuanordnung und andere Funktionen, um es den Benutzern von Shopify zu erleichtern. Es funktioniert durch die meisten Interaktionsmedien, wie Maus, Berührung und Force Touch, und mit zugänglicher Tastaturunterstützung in Kürze.

Mit Draggable kann man das Drag & Drop-Verhalten vollständig kontrollieren! Eine der Funktionen von Draggable besteht darin, dass systemeigene Browserereignisse in eine umfassende API abstrahiert werden, um eine benutzerdefinierte Drag & Drop-Erfahrung zu erstellen.

Draggable kommt auch mit zusätzlichen Modulen: Sortierbar, Austauschbar und Droppable. Draggable, aber macht die schwere Hebearbeit wie das Erstellen eines Spiegels, das Aussenden von Ereignissen, das Verwalten von Sensorereignissen und das Ziehen von Elementen.

Die zusätzlichen Module verfügen über eine ähnliche API-Schnittstelle, wie sie auf Draggable aufgebaut sind. Einige seiner Funktionen sind:

Eigenschaften von Draggable :

  • Funktioniert mit nativen Drag-, Maus-, Touch- und Force-Touch-Ereignissen
  • Durch das Einhaken in den ziehbaren Ereignislebenszyklus kann das Ziehen des Ziehens
  • Erweitern Sie die Drag-Erkennung, indem Sie Sensoren zum Draggable hinzufügen
  • Die Bibliothek wird zuerst ES6
  • Sofortige Sichtbarkeit Ihrer Aktionen und deren Ergebnisse

Swap

Der klassische Switcheroo ermöglicht es den Benutzern, ein Element über ein anderes zu ziehen und ihnen beim Handel von Plätzen im DOM zuzusehen. Diese Funktionalität eignet sich am besten für die Beibehaltung von Layoutbemaßungen.

Sortierbaren

Mit dieser Funktion können Sie jetzt DOM-Knoten mit Stil sortieren. Ziehen Sie Elemente in einer Sammlung von einem Ort an einen anderen, und zeigen Sie alles an, was an Ort und Stelle einrastet. Es ist schnell und reaktionsschnell, die Nicht verlassen Ihre Leistung Brieftasche für Rahmen geschnallt und gibt Ihnen genau das, was Sie suchen.

Collidable

Starten Sie Ihre Spielentwicklungsreise und injizieren Sie eine Kollisionserkennung. Collidable ist ein Feature, das verhindert, dass sich ziehbare Elemente überlappen, wodurch Kollisionsereignisse vermieden werden, wenn das gezogene Quellelement in eine eingeschränkte Zone eintritt und diese verlässt.

Einige der Eigenschaften und Vorteile des Tools sind:

Zugänglich

Drag & Drop Barrierefreiheit ist ein empfindliches Werkzeug und ist sehr nützlich. Während Browser weiterhin an einer zuverlässigen nativen Lösung arbeiten, erleichtert Draggable die Bereitstellung aller richtigen Arienattribute, um an den richtigen Stellen verfügbar zu sein. Außerdem müssen Sie keine intensiven Kenntnisse über Codes haben, um dieses Tool verwenden zu können.

Einer der Hauptgründe, warum Drag -and-Drop-Option erstellt wird, ist es, eine Chance für diejenigen mit weniger als technischem Know-how in diesem Bereich zu geben.

Umfangreiche

Draggable ist leicht erweiterbar. Wenn Sie ein Modul benötigen, das noch nicht verfügbar ist, können Sie ein benutzerdefiniertes Modul für die benötigten Funktionen schreiben und es zur Überprüfung an Das GitHub-Repository senden. Die Chancen stehen gut, dass viele andere wie Sie die gleiche Funktionalität benötigen und Sie sie mit anderen teilen können.

Animation

Nichts ärgert den Entwickler mehr, als sein persönliches Design zu unterbrechen. Draggable ist nicht so ein Werkzeug, um der persönlichen Note eines Designers in den Weg zu kommen und die Show zu stehlen, indem er widerspenstige Animationsstile erzwingt. Sie können einfach Ihre Auswahl aus einer Portion CSS Selektoren und Stil nach Herzenslust nehmen. Sie können Ihre Website nach Ihren Anforderungen gestalten.

Wo bekommt man es?

Das Tool befindet sich noch in der Beta-Version und kann über npm installiert werden.

npm installieren @Shopify/draggable –speichern

oder über Garn:

Garn @Shopify hinzufügen/draggable

Weitere Dokumentationen finden Sie auf den folgenden Links für jedes Modul in den jeweiligen Verzeichnissen.

Für weitere Beratungs- und Entwicklungsanforderungen für Ihren Shopify Store können Sie sich an WebBee Global wenden. Die Entwicklungsteams von WebBee verfügen über umfangreiches Wissen über die Shopify-Plattform und können Sie in die richtige Richtung zur Nutzung ihrer Funktionen führen.

Scroll to top
Schedule a Meeting
close slider