最好用的vue拖拽组件vuedraggable在vue2和3下的使用 2023年2月4日 2573 代码厨子 以前公司有项目使用过vuedraggable组件，特别好使，但是那是vue2的，现在已经升级了vue3，所以不知道还能用不。抱着试试看心理试了一下。。。。 最初，我是想放弃的，可是抱着最后一丝希望在网上找了半天，发现还是有支持vue3的版本的。这里，记录一下2和3的使用区别，供大家参考。 注意：2和3的包都是不同的，千万要区别清楚！！！ # vue2 ## 安装 ```javascript npm i vuedraggable -S ``` ## 使用 ```javascript <template> <draggable v-model="myArray"> <div v-for="element in myArray" :key="element.id">{{element.name}}</div> </draggable> </template> <script> import draggable from 'vuedraggable' export default { components: { draggable }, data () { return { myArray: [ { id: 1, name: 'Jenny' }, { id: 2, name: 'kevin' }, { id: 3, name: 'lili' } ] } } } </script> ``` # vue3 ## 安装 ```javascript npm i vuedraggable@next -S ``` ## 使用 ```javascript <template> <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false" item-key="id"> <template #item="{element}"> <div>{{element.name}}</div> </template> </draggable> </template> <script lang="ts"> import { defineComponent, reactive, toRefs } from 'vue' import draggable from 'vuedraggable' export default defineComponent({ components: { draggable }, setup () { const data = reactive({ drag: false, myArray: [ { id: 1, name: 'Jenny' }, { id: 2, name: 'kevin' }, { id: 3, name: 'lili' } ] }) return { ...toRefs(data) } } }) </script> ```
