Fügen Sie Drag & Drop einfach mit Dragula zur Website hinzu

Suchen Sie nach einer kostenlosen Bibliothek Handle Drag & Drop-Funktionen? Dann Dragula ist die einzige Ressource, die Sie brauchen.

Dieses kostenlose Skript ermöglicht es Ihnen Fügen Sie Drag & Drop-Funktionen für jedes Element auf Ihrer Seite hinzu. Dies beinhaltet die Unterstützung der React & AngularJS-Frameworks sowie Vanilla-JavaScript.

Dragula ist super einfach einzurichten und kommt mit Eine Reihe von benutzerdefinierten Auslösern für das Benutzerverhalten. Dies bedeutet, dass Sie Ihre eigenen Funktionen auslösen können, nachdem der Benutzer ein Element gezogen, auf ein Element geklickt oder einen beliebigen Teil der Seite neu angeordnet hat.

Wenn Sie einen Blick auf die Live-Demo werfen, werden Sie feststellen ein paar Code-Schnipsel, zusammen mit verwendbare Proben.

Das Dragula-Setup erfordert nur eine einzige JavaScript-Datei damit es funktioniert. Die zusätzlichen Optionen können jedoch etwas verwirrend werden.

Angenommen, Sie haben zwei Container, #links und #Recht, dass Sie ziehbare Elemente unterstützen möchten. Du musst es tun Fügen Sie diese Container manuell zur Dragula-Funktion hinzu zur Unterstützung der Drag & Drop-Methoden.

Wenn Sie sich nicht mit den Grundlagen der Front-End-Entwicklung auskennen, werden Sie Schwierigkeiten haben, Dragula einzusetzen. Aber das GitHub-Repo hat viel zu bieten tolle Beispiele, denen Sie folgen können und selbst Codeausschnitte, die Sie kopieren können.

Hier ist ein Beispiel aus den GitHub-Dokumenten zielen Sie auf die beiden (linken und rechten) Container:

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

Beachten Sie, wenn Sie auf der GitHub-Seite weiter suchen, die Sie finden eine riesige Auswahl an Optionen Sie können zu dieser Funktion übergehen.

Du kannst wählen ob Elemente kopiert oder verschoben werden sollen, welche Container die gezogenen Objekte unterstützen und selbst Callback-Funktionen die durch verschiedene Benutzerverhalten arbeiten, wie:

• Schweben über einem Container
• Erstes Klick- und Ziehereignis
• Ereignis ablegen
• Ein Element aus den Grenzen werfen
• Klonen eines Elements / Containers durch Ziehen

Diese Bibliothek nimmt einige anfängliche Arbeit Wenn Sie jedoch mit JavaScript vertraut sind, sollte dies ein Kinderspiel sein.

Schauen Sie sich die Demo-Seite an sehen, wie es funktioniert und zu Holen Sie sich ein paar Codebeispielideen. Dragula ist eine riesige Bibliothek und wahrscheinlich das beste Open-Source-Skript Drag & Drop mit den meisten Anpassungsmöglichkeiten.