// 使用指令
<div v-drag="greet"></div>
greet回调移动的距离
greet (val) { console.log(val }
// 创建指令
import Vue from 'vue'
import _ from 'lodash'
Vue.directive('drag', {
// drag自定义指令
bind: function (a, binding) {
var isStart = false // 是否已经开始拖拽
let distance = {} // 拖动的距离
let l, t, x, y // 当前被拖动的距离
let w // 当前屏幕宽度
let h // 当前屏幕的高度
// 移动端
a.addEventListener(
'touchstart',
function (e) {
isStart = true // 如果没有开始拖拽， 则可以拖拽
if (!e.changedTouches[0]) return
var { clientX, clientY } = e.changedTouches[0]
x = clientX - e.changedTouches[0].target.x
y = clientY - e.changedTouches[0].target.y
w = document.body.clientWidth // 当前屏幕宽度
h = document.body.clientHeight // 当前屏幕的高度
},
{ passive: false }
)
// _.debounce 防抖
a.addEventListener(
'touchmove',
_.debounce(function (e) {
e.preventDefault()
l = e.changedTouches[0].clientX - x
t = e.changedTouches[0].clientY - y
if (l < 0 && t < 0) {
a.style.left = 0 + 'px'
a.style.top = 0 + 'px'
} else if (l < 0 && t + a.clientHeight < h) {
a.style.left = 0 + 'px'
a.style.top = t + 'px'
} else if (l < 0 && t + a.clientHeight >= h) {
a.style.left = 0 + 'px'
a.style.top = h - a.clientHeight + 'px'
} else if (l + a.clientWidth > w && t < 0) {
a.style.left = w - a.clientWidth + 'px'
a.style.top = 0 + 'px'
} else if (l + a.clientWidth < w && t + a.clientHeight >= h) {
a.style.left = l + 'px'
a.style.top = h - a.clientHeight + 'px'
} else if (l + a.clientWidth < w && t < 0) {
a.style.left = l + 'px'
a.style.top = 0 + 'px'
} else if (l + a.clientWidth > w && t + a.clientHeight < h) {
a.style.left = w - a.clientWidth + 'px'
a.style.top = t + 'px'
} else if (l + a.clientWidth > w && t + a.clientHeight >= h) {
a.style.left = w - a.clientWidth + 'px'
a.style.top = h - a.clientHeight + 'px'
} else {
a.style.left = l + 'px'
a.style.top = t + 'px'
}
}, 5),
{ passive: false }
)
a.addEventListener(
'touchend',
function (e) {
// console.log(w)
isStart = false
document.ontouchmove = null
document.ontouchmove = null
distance = {
type: 'move',
clientX: x - e.changedTouches[0].clientX, // 拖动的 x 距离
clientY: y - e.changedTouches[0].clientY // 拖动的 y 距离
}
binding.value(distance) // 返回拖动的距离
},
{ passive: false }
)
// 移动端-- end
// pc端
a.onmousedown = function (e) {
e.preventDefault()
w = document.body.clientWidth // 当前屏幕宽度
h = document.body.clientHeight // 当前屏幕的高度
if (isStart) return // 如果已经开始拖拽， 返回
isStart = true // 如果没有开始拖拽， 则可以拖拽
var { clientX, clientY } = e
var x = clientX - a.offsetLeft
var y = clientY - a.offsetTop
document.onmousemove = _.debounce(function (e) {
e.preventDefault()
l = e.clientX - x
t = e.clientY - y
if (l < 0 && t < 0) {
a.style.left = 0 + 'px'
a.style.top = 0 + 'px'
} else if (l < 0 && t + a.clientHeight < h) {
a.style.left = 0 + 'px'
a.style.top = t + 'px'
} else if (l < 0 && t + a.clientHeight >= h) {
a.style.left = 0 + 'px'
a.style.top = h - a.clientHeight + 'px'
} else if (l + a.clientWidth > w && t < 0) {
a.style.left = w - a.clientWidth + 'px'
a.style.top = 0 + 'px'
} else if (l + a.clientWidth < w && t + a.clientHeight >= h) {
a.style.left = l + 'px'
a.style.top = h - a.clientHeight + 'px'
} else if (l + a.clientWidth < w && t < 0) {
a.style.left = l + 'px'
a.style.top = 0 + 'px'
} else if (l + a.clientWidth > w && t + a.clientHeight < h) {
a.style.left = w - a.clientWidth + 'px'
a.style.top = t + 'px'
} else if (l + a.clientWidth > w && t + a.clientHeight >= h) {
a.style.left = w - a.clientWidth + 'px'
a.style.top = h - a.clientHeight + 'px'
} else {
a.style.left = l + 'px'
a.style.top = t + 'px'
}
}, 5)
document.onmouseup = function (e) {
document.onmousedown = null
document.onmousemove = null
isStart = false
distance = {
type: 'move',
clientX: clientX - e.clientX, // 拖动的 x 距离
clientY: clientY - e.clientY // 拖动的 y 距离
}
binding.value(distance) // 返回拖动的距离
}
}
// pc端 - end
}
})
网友评论