vue-dragula

new Vue({ el: '#app', data: { colOne: ['Item 1.1', 'Item 1.2', 'Item 1.3'], colTwo: ['Item 2.1', 'Item 2.2', 'Item 2.3'] }, methods: { onClick(event) { console.log('Clicked:', event.target.textContent); } }, created: function () { // Set dragula options for 'first-bag' specifically Vue.vueDragula.options('first-bag', { direction: 'vertical', removeOnSpill: true // Example option }); // Listen for a custom vue-dragula event Vue.vueDragula.eventBus.$on('dropModel', (bagName, el, target, source, dropIndex) => { console.log(`Model dropped in ${bagName}: element ${el.textContent} at index ${dropIndex} in target ${target.className}`); // Manually update your data model if necessary, as per v2 alpha notes, though v1 syncs automatically. // Example: If dragging from colOne to colTwo if (source.className.includes('col-one') && target.className.includes('col-two')) { // This is simplified and assumes direct model manipulation, in reality, use appropriate array methods. const movedItem = this.colOne.splice(el.dataset.originalIndex, 1)[0]; this.colTwo.splice(dropIndex, 0, movedItem); } else if (source.className.includes('col-two') && target.className.includes('col-one')) { const movedItem = this.colTwo.splice(el.dataset.originalIndex, 1)[0]; this.colOne.splice(dropIndex, 0, movedItem); } }); } }); // Assuming a basic HTML structure and Vue/VueDragula are globally available /* <div id="app"> <div class="wrapper"> <div class="container col-one" v-dragula="colOne" bag="first-bag"> <div v-for="(text, index) in colOne" :key="text" @click="onClick" :data-original-index="index">{{text}} [click me]</div> </div> <div class="container col-two" v-dragula="colTwo" bag="first-bag"> <div v-for="(text, index) in colTwo" :key="text" :data-original-index="index">{{text}}</div> </div> </div> </div> */