Vue div拖動(dòng)是一種非常有用的功能，它能夠幫助我們實(shí)現(xiàn)頁(yè)面拖拽的效果。在Vue中，我們可以使用vue-draggable插件來(lái)實(shí)現(xiàn)div的拖動(dòng)。

首先，我們需要在Vue項(xiàng)目中安裝vue-draggable插件，可以使用npm或者yarn進(jìn)行安裝。

npm install vuedraggable

或者

yarn add vuedraggable

安裝完成后，我們需要在Vue組件中引入并使用vue-draggable。

<template>
<div>
<draggable v-model="list" :options="options">
<div v-for="(item, index) in list" :key="index">
{{ item }}
</div>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable
},
data() {
return {
list: ['apple', 'banana', 'orange'],
options: {
animation: 200,
group: 'fruit'
}
}
}
}
</script>

在這個(gè)例子中，我們使用了v-model指令來(lái)綁定了一個(gè)數(shù)組list，而在draggable組件中，我們通過(guò)v-for指令來(lái)循環(huán)遍歷數(shù)組并渲染每個(gè)div元素。同時(shí)，我們還可以通過(guò)options屬性來(lái)配置一些拖動(dòng)的選項(xiàng)，比如動(dòng)畫(huà)效果和分組等。

最后，我們需要在CSS樣式中給每個(gè)div元素設(shè)置一些樣式，來(lái)讓它們可以被拖動(dòng)。

.draggable {
cursor: move;
}

這樣，我們就成功地實(shí)現(xiàn)了Vue div拖動(dòng)的效果。