Entwicklung & Design

Drag-&-Drop in einfach: Das kann die JavaScript-Library Dragula

Drag-&-Drop. (Grafik: Shutterstock / Mmaxer)

Dragula ist eine Javascript-Library mit der ihr auf einfache Art und Weise Drag-&-Drop-Funktionalität in eure Web-Apps integriert. Das müsst ihr darüber wissen.

Dragula: Drag-&-Drop für eure Web-App

Nicolas Bevacqua suchte nach einer einfachen Möglichkeit um Drag-&-Drop-Funktionalität in Web-Apps zu integrieren. Da er keine zufriedenstellende Lösung finden konnte, entwickelte der mit Dragula kurzerhand eine eigene JavaScript-Library zu diesem Zweck.

Drag-&-Drop für eure Web-App: Die JavaScript-Library Dragula soll es ganz einfach machen. (Screenshot: github.io)

Drag-&-Drop für eure Web-App: Die JavaScript-Library Dragula soll es ganz einfach machen. (Screenshot: github.io)

Dragula soll extrem einfach einzusetzen sein. Außerdem erkennt die Library selbstständig, wie die Elemente nach dem Verschieben angeordnet werden sollen. Dank dem visuellen Feedback in Form eines Schattens sehen Nutzer außerdem immer, wo sich das Element in die Reihe einfügen wird beim Loslassen.

Dragula: Library steht unter der MIT-Lizenz

Wer sich anschauen möchte, wie das Ganze funktioniert, der kann bei der Dragula-Demo-Seite vorbeischauen. Den Quellcode und eine Erklärung aller Features und Optionen findet ihr auf der GitHub-Seite von Dragula. Ihr könnt die Library aber auch direkt über die Paketmanager npm oder Bower herunterladen. Unter Bower nennt sich die Library allerdings dragula.js. Dragula steht unter der freien MIT-Lizenz.

Wer nach Alternativen sucht, der sollte unseren Artikel „Tolle JavaScript-Datenbank: Die besten Libraries, Frameworks und Plugins im Überblick“ lesen.

via news.ycombinator.com

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ein Kommentar
238870 (abgemeldet)
238870 (abgemeldet)

Möchte jetzt nicht rummeckern, aber unterscheidet sich das irgendwie auch nur ansatzweise von dem jquery.sortable (https://jqueryui.com/sortable) außer das es ohne jquery ist? Fast jede webseite hat jquery implementiert, jede andere wo man es nicht sehen kann nutzt die noConflict version, nutzt Extjs oder andere frameworks, die das bereits können…

forks von dem jquery.sortable gibt es ja schon eine menge… z.b.: http://farhadi.ir/projects/html5sortable/

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung