先看看官网demo
https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/example.gif首先在vue项目中,用npm包下载下来
npm install vuedraggable -S
- 下载下来后,引入插件,在你的vue文件的script标签里面这样引入
import draggable from 'vuedraggable'
- 别忘了下面要注册组件
components: {
draggable
},
-
完整代码
<template>
<div>
<draggable v-model="myArray">
<div v-for="element in myArray" :key="element.id">
{{element.name}}
</div>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable,
},
data() {
return {
myArray : [{
id:1,
name:"我是1号",
},{
id:2,
name:"我是2号",
},{
id:3,
name:"我是3号",
},{
id:4,
name:"我是4号",
},{
id:5,
name:"我是5号",
}]
}
}
}
</script>