main.js添加
Vue.directive('drag', {
bind (el) {
var oDiv = el
oDiv.onmousedown = function (ev) {
var disX = ev.clientX - oDiv.offsetLeft
var disY = ev.clientY - oDiv.offsetTop
ev.preventDefault()
document.onmousemove = function (ev) {
var l = ev.clientX - disX
var t = ev.clientY - disY
oDiv.style.left = l + 'px'
oDiv.style.top = t + 'px'
}
document.onmouseup = function () {
document.onmousemove = null
document.onmouseup = null
}
}
}
}) 使用
<div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', right:0, top:0}"></div> 本文作者为gengboxb，转载请注明。