在Vue中，實(shí)現(xiàn)div拖拽效果是十分簡(jiǎn)單的。我們可以使用Vue中的指令來(lái)實(shí)現(xiàn)這一功能，指令的作用是對(duì)Dom元素進(jìn)行操作，這里我們使用v-drag指令。

Vue.directive('drag', {
bind: function (el, binding, vnode) {
var drag = el.querySelector('.drag')
var tag = binding.arg || 'div'
var target = el.querySelector(tag)
var dragable = false
var startX = 0
var startY = 0
var dragX = 0
var dragY = 0
drag.addEventListener('mousedown', function (event) {
dragable = true
startX = event.clientX
startY = event.clientY
})
document.addEventListener('mousemove', function (event) {
if (dragable) {
dragX = event.clientX - startX
dragY = event.clientY - startY
target.style.left = (target.offsetLeft + dragX) + 'px'
target.style.top = (target.offsetTop + dragY) + 'px'
startX = event.clientX
startY = event.clientY
}
})
document.addEventListener('mouseup', function (event) {
dragable = false
dragX = 0
dragY = 0
})
}
})

代碼解釋：

1. 首先定義一個(gè)指令drag，這個(gè)指令需要在綁定的元素上才能生效。
2. 使用querySelector方法獲取拖拽區(qū)域drag和目標(biāo)區(qū)域target。
3. 將dragable變量初始化為false，表示目前還沒(méi)有開(kāi)始拖拽操作。
4. 在mousedown事件中，設(shè)置dragable為true，表示開(kāi)始拖拽操作，并獲取開(kāi)始拖拽時(shí)的坐標(biāo)。
5. 在mousemove事件中，如果dragable為true，則計(jì)算出拖拽距離dragX和dragY，并將目標(biāo)區(qū)域的left和top屬性分別加上這兩個(gè)距離。
6. 在mouseup事件中，設(shè)置dragable為false，表示拖拽已經(jīng)結(jié)束。

在使用這個(gè)指令時(shí)，只需要在需要拖拽效果的元素上使用v-drag指令即可：

拖拽區(qū)域
目標(biāo)區(qū)域

這里我們將指令綁定在包含拖拽區(qū)域和目標(biāo)區(qū)域的div上，因?yàn)檎麄€(gè)div需要移動(dòng)，而不是單純的拖拽區(qū)域。

上面的代碼只是實(shí)現(xiàn)了基本的拖拽效果，如果需要更復(fù)雜的拖拽操作，例如限制拖拽范圍、處理碰撞事件等，可以根據(jù)實(shí)際需求進(jìn)行修改。