1.安装拖拽排序工具vuedraggable
yarn 或 npm 安装
yarn add vuedraggable
npm i -S vuedraggable
2.引入vuedraggable组件
script部分
import draggable from 'vuedraggable'
...
export default {
components: {
draggable,
},
data(){
return {
myArray:[]
}
}
...
3.使用vuedraggable组件
template部分,注意v-model和for循环的都是同一个数组
<draggable v-model="myArray">
<transition-group>
<div v-for="element in myArray" :key="element.id">
{{element.name}}
</div>
</transition-group>
</draggable>