Los 10 mejores componentes de arrastrar y soltar de Vue para su aplicación

Vue Drag and Drop es una característica de muchas aplicaciones web interactivas. Proporciona una forma intuitiva para que los usuarios manipulen sus datos. Agregar la función de arrastrar y soltar es fácil de agregar a las aplicaciones Vue.js.

Aquí hay 10 componentes vue drop que contribuyen a la flexibilidad de su aplicación vue.

1. Ver. Arrastrable

Componente Vue (Vue.js 2.0) o directiva (Vue.js 1.0) que permite arrastrar y soltar y la sincronización con la matriz de modelos de vista.

Basado en y ofreciendo todas las características de Sortable.js

Manifestación: https://sortablejs.github.io/Vue.Draggable/#/simple

pitón del bot de los equipos de microsoft

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

2. kanban-vue en tiempo real

Tablero kanban en tiempo real construido con Vue.js y con tecnología Hamoni Sync.

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

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

3. vista anidable

Arrastrar y soltar la lista jerárquica creada como un componente de vue.

Metas

• Un componente de vue simple para crear una lista que se puede arrastrar a elementos personalizables
• Reordene los elementos arrastrándolos sobre otro elemento
• Anida los elementos de forma intuitiva arrastrándolos hacia la derecha
• Totalmente personalizable, se envía sin CSS
• Todo es configurable: identificador de artículo, nivel máximo de anidamiento, umbral para anidamiento

Manifestación: https://rhwilr.github.io/vue-nestable/

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

4. VueDraggable

Directiva VueJS para arrastrar y soltar.

Implementación nativa de arrastrar y soltar HTML5 hecha para VueJS.

Manifestación: https://vivify-ideas.github.io/vue-draggable/

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

5. diseño de cuadrícula vue

vue-grid-layout es un sistema de diseño de cuadrícula, como Gridster, para Vue.js. Muy inspirado en React-Grid-Layout

Manifestación: https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html

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

6. vista de árbol de arrastre

Es un árbol de componentes (Vue2.x) que le permite arrastrar y soltar el nodo para intercambiar sus datos.

Característica

• Haga doble clic en un nodo para convertirlo en una carpeta
• Arrastre y suelte el nodo del árbol, incluso entre dos niveles diferentes
• Controla si un nodo en particular se puede arrastrar y si el nodo se puede conectar a otros nodos.
• Agregar / eliminar nodo en cualquier nivel (#TODO)

Manifestación: https://vigilant-curran-d6fec6.netlify.com/#/

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

7. VueDragDrop

Un ejemplo simple de arrastrar y soltar creado en Vue.js.

Manifestación: https://seregpie.github.io/VueDragDrop/

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

8. Vue-drag-resize

Componente Vue para cambiar el tamaño y arrastrar elementos.

Manifestación: http://kirillmurashov.com/vue-drag-resize/

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

9. vue-smooth-dnd

Una biblioteca clasificable de arrastrar y soltar rápida y liviana para Vue.js con muchas opciones de configuración que cubren muchos escenarios de d & d.

Esta biblioteca consta de componentes envoltorios de Vue.js sobre la biblioteca smooth-dnd.

¡Muestre, no lo diga!

donde comprar moneda electra

Manifestación: https://kutlugsahin.github.io/vue-smooth-dnd/#/cards

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

10. vista de dragula

Arrastra y suelta tan simple que duele

Manifestación: http://astray-git.github.io/vue-dragula/

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

# vue # vue-drag # vue-drop # arrastrar y soltar # vue-arrastrar y soltar