vue-draggable

import Vue from 'vue'; import VueDraggable from 'vue-draggable'; Vue.use(VueDraggable); new Vue({ el: '#app', template: ` <div id="app"> <h3>My Drag & Drop Lists</h3> <div v-drag-and-drop:options="options"> <ul @added="onAdded" @removed="onRemoved" @reordered="onReordered"> <li v-for="item in items1" :key="item.id" :data-id="item.id">{{ item.name }}</li> </ul> <ul @added="onAdded" @removed="onRemoved" @reordered="onReordered"> <li v-for="item in items2" :key="item.id" :data-id="item.id">{{ item.name }}</li> </ul> </div> </div> `, data() { return { items1: [ { id: 1, name: 'Task A' }, { id: 2, name: 'Task B' } ], items2: [ { id: 3, name: 'Task X' }, { id: 4, name: 'Task Y' } ], options: { dropzoneSelector: 'ul', draggableSelector: 'li', multipleDropzonesItemsDraggingEnabled: true, onDrop: (event) => { console.log('Item dropped:', event.items.map(i => i.dataset.id)); // For simple scenarios, manual data manipulation would go here. // For reactive data, VueDraggableGroup is recommended. } } }; }, methods: { onAdded({ ids, index, dropzone }) { console.log('Item added:', ids, 'at index:', index, 'in dropzone:', dropzone); // Update your data model based on these events }, onRemoved({ ids, index, dropzone }) { console.log('Item removed:', ids, 'from index:', index, 'in dropzone:', dropzone); }, onReordered({ ids, index, dropzone }) { console.log('Item reordered:', ids, 'at index:', index, 'in dropzone:', dropzone); } } });