先看看官網(wǎng)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>