如何在Vue中使用拖动替换来达到一定的交互目的

npm install dragula

import dragula from ‘dragula’；

dragula([document.querySelector(‘#list1’), document.querySelector(‘#list2’)])
.on(‘dragend’, function(el){ });

Vue.component(‘drag-and-drop’, {
    data() {
        return {
            items: [
                { name: ‘item1’ },
                { name: ‘item2’ },
                { name: ‘item3’ },
                { name: ‘item4’ },
                { name: ‘item5’ },
            ]
        }
    },
    mounted() {
        let self = this;
        let container = this.$refs.container;
        dragula([container])
            .on(‘drop’, function(el, target, source, sibling){  //拖拽成功后的逻辑
                let oldIndex = el.getAttribute(‘data-index’); // 获取拖住的元素的原来的index
                let newIndex = sibling ? sibling.getAttribute(‘data-index’) : oldIndex;  // 获取放置的位置或元素
                self.moveItem(+oldIndex, +newIndex);   // 将元素移动位置
            });
    },
    methods: {
        moveItem(oldIndex, newIndex) { //移动元素实例方法
            if (newIndex >= this.items.length) {
                let k = newIndex - this.items.length;
                while ((k--) + 1) {
                    this.items.push(undefined);
                }
            }
            this.items.splice(newIndex, 0, this.items.splice(oldIndex, 1)[0]);
        }
    }
});

<div id="app">
    <div class="list" ref="container">
        <div v-for="(item, index) in items" :key="index" :data-index="index">{{ item.name }}</div>
    </div>
</div>