Die 10 besten Drag-and-Drop-Komponenten von Vue für Ihre App

Blog

Die 10 besten Drag-and-Drop-Komponenten von Vue für Ihre App

Die 10 besten Drag-and-Drop-Komponenten von Vue für Ihre App

Vue Drag & Drop ist eine Funktion vieler interaktiver Web-Apps. Es bietet Benutzern eine intuitive Möglichkeit, ihre Daten zu manipulieren. Das Hinzufügen einer Drag-and-Drop-Funktion ist einfach zu Vue.js-Apps hinzuzufügen.

Hier sind 10 Vue-Drop-Komponenten, die zur Flexibilität Ihrer Vue-Anwendung beitragen.

1. Ansicht.Ziehbar

Vue-Komponente (Vue.js 2.0) oder Direktive (Vue.js 1.0), die Drag-and-Drop und Synchronisierung mit dem Ansichtsmodellarray ermöglicht.

Basierend auf und mit allen Funktionen von Sortable.js

Ansicht.Ziehbar

Demo: https://sortablejs.github.io/Vue.Draggable/#/simple

Google Maps-Standortfreigabe aktualisiert das iPhone nicht

Herunterladen: https://github.com/SortableJS/Vue.Draggable/archive/master.zip

2. Echtzeit-Kanban-Vue

Echtzeit-Kanban-Board, erstellt mit Vue.js und unterstützt von Hamoni Sync.

Echtzeit-Kanban-Vue

Demo: https://dev.to/pmbanugo/real-time-kanban-board-with-vuejs-and-hamoni-sync-52kg

Herunterladen: https://github.com/pmbanugo/realtime-kanban-vue/archive/master.zip

3. Ansicht-nestable

Hierarchische Liste per Drag & Drop als Vue-Komponente erstellt.

Ziele

  • Eine einfache vue-Komponente zum Erstellen einer verschiebbaren Liste mit anpassbaren Elementen
  • Ordnen Sie Elemente neu an, indem Sie sie über ein anderes Element ziehen
  • Verschachteln Sie Elemente intuitiv durch Ziehen nach rechts
  • Vollständig anpassbar, Lieferung ohne CSS
  • Alles ist konfigurierbar: Artikelkennung, maximale Verschachtelungsebene, Schwellenwert für die Verschachtelung

Ansicht-nestable

Demo: https://rhwilr.github.io/vue-nestable/

Herunterladen: https://github.com/rhwilr/vue-nestable/archive/master.zip

Vier. VueDraggable

VueJS-Direktive für Drag & Drop.

Native HTML5-Drag-and-Drop-Implementierung für VueJS.

VueDraggable

Demo: https://vivify-ideas.github.io/vue-draggable/

Herunterladen: https://github.com/Vivify-Ideas/vue-draggable/archive/master.zip

5. vue-grid-layout

vue-grid-layout ist wie Gridster ein Grid-Layout-System für Vue.js. Stark inspiriert im React-Grid-Layout

vue-grid-layout

Demo: https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html

Herunterladen: https://github.com/jbaysolutions/vue-grid-layout/archive/master.zip

6. Baumansicht ziehen

Es handelt sich um eine Baumkomponente (Vue2.x), mit der Sie den Knoten per Drag & Drop verschieben können, um ihre Daten auszutauschen.

Besonderheit

  • Doppelklicken Sie auf einen Knoten, um ihn in einen Ordner zu verwandeln
  • Ziehen Sie den Baumknoten per Drag & Drop, sogar zwischen zwei verschiedenen Ebenen
  • Steuert, ob ein bestimmter Knoten gezogen werden kann und ob der Knoten mit anderen Knoten verbunden werden kann
  • Knoten in jeder Ebene anhängen/entfernen (#TODO)

Baumansicht ziehen

Demo: https://vigilant-curran-d6fec6.netlify.com/#/

Herunterladen: https://github.com/shuiRong/vue-drag-tree/archive/master.zip

7. VueDragDrop

Ein einfaches Drag & Drop-Beispiel, das in Vue.js erstellt wurde.

VueDragDrop

Demo: https://seregpie.github.io/VueDragDrop/

Herunterladen: https://github.com/SeregPie/VueDragDrop/archive/master.zip

8. Vue-Ziehen-Größe ändern

Vue-Komponente zum Ändern der Größe und Ziehen von Elementen.

Vue-Ziehen-Größe ändern

Demo: http://kirillmurashov.com/vue-drag-resize/

Herunterladen: https://github.com/kirillmurashov/vue-drag-resize/archive/master.zip

9. vue-smooth-dnd

Eine schnelle und leichte, sortierbare Drag&Drop-Bibliothek für Vue.js mit vielen Konfigurationsoptionen, die viele d&d-Szenarien abdecken.

Diese Bibliothek besteht aus Wrapper-Vue.js-Komponenten über einer smooth-dnd-Bibliothek.

Zeigen, nicht erzählen!

wo kann ich gme kaufen

vue-smooth-dnd

Demo: https://kutlugsahin.github.io/vue-smooth-dnd/#/cards

Herunterladen: https://github.com/kutlugsahin/vue-smooth-dnd/archive/master.zip

10. Dragula-Ansicht

Drag & Drop so einfach, dass es wehtut

Dragula-Ansicht

Demo: http://astray-git.github.io/vue-dragula/

Herunterladen: https://github.com/Astray-git/vue-dragula/archive/master.zip

#vue #vue-drag #vue-drop #drag-and-drop #vue-drag-and-drop