本篇文章分享一個(gè)Vue實(shí)戰(zhàn)，介紹下使用Vue的自定義指令實(shí)現(xiàn)鼠標(biāo)拖動(dòng)元素的效果以及解決移動(dòng)端適配的問(wèn)題。
核心屬性
Element.clientWidth：元素可視寬度。
Element.clientHeight：元素可視高度。
MouseEvent.clientX：鼠標(biāo)相對(duì)于瀏覽器左上頂點(diǎn)的水平坐標(biāo)。
MouseEvent.clientY：鼠標(biāo)相對(duì)于瀏覽器左上頂點(diǎn)的垂直坐標(biāo)。
Touch.clientX：觸點(diǎn)相對(duì)于瀏覽器左上頂點(diǎn)的水平坐標(biāo)（移動(dòng)端屬性）。
Touch.clientY：觸點(diǎn)相對(duì)于瀏覽器左上頂點(diǎn)的垂直坐標(biāo)（移動(dòng)端屬性）。
HTMLElement.offsetLeft：當(dāng)前元素左上角相對(duì)于父節(jié)點(diǎn)（HTMLElement.offsetParent）的左邊偏移的距離。當(dāng)元素脫離文檔流時(shí)（position: fixed）則相對(duì)于原點(diǎn)（瀏覽器左上頂點(diǎn)）偏移。【相關(guān)推薦：vuejs視頻教程】
HTMLElement.offsetTop：當(dāng)前元素左上角相對(duì)于父節(jié)點(diǎn)（HTMLElement.offsetParent）的頂部偏移的距離。當(dāng)元素脫離文檔流時(shí)（position: fixed）則相對(duì)于原點(diǎn)（瀏覽器左上頂點(diǎn)）偏移。
Element.style.top：可讀可寫，值為 offsetTop。
Element.style.left：可讀可寫，值為 offsetLeft。
實(shí)現(xiàn)思路
待滑動(dòng)元素必須設(shè)置
position: fixed or absolute
元素滑動(dòng)需要依賴于鼠標(biāo)的移動(dòng)，鼠標(biāo)的移動(dòng)位置決定了元素滑動(dòng)的位置，元素的位置是通過(guò)調(diào)整左上頂點(diǎn)坐標(biāo)來(lái)的，所以我們要知道元素滑動(dòng)后的左上頂點(diǎn)坐標(biāo)，這樣才能將元素移動(dòng)到指定位置（鼠標(biāo)懸停的位置）。
首先要計(jì)算出鼠標(biāo)在移動(dòng)元素前相對(duì)元素的位置 (x, y) ：
// 鼠標(biāo)當(dāng)前的位置減去元素當(dāng)前的位置 (x, y) = (e.clientX - el.offsetLeft, e.clientY - el.offsetTop)
鼠標(biāo)相對(duì)元素位置是指相對(duì)于元素左上頂點(diǎn)的位置。
e 指鼠標(biāo)事件，el 指滑動(dòng)的元素。
知道了鼠標(biāo)的相對(duì)位置，后續(xù)的鼠標(biāo)移動(dòng)，只要知道移動(dòng)后的鼠標(biāo)坐標(biāo)，就能很容易的把元素的左上頂點(diǎn)坐標(biāo)算出來(lái)。
計(jì)算元素移動(dòng)后的左上頂點(diǎn)坐標(biāo) (x', y') ：
// 鼠標(biāo)當(dāng)前的位置減去滑動(dòng)前的相對(duì)位置 (x', y') = (e.clientX - x, e.clientY - y)
(x', y') 就是要移動(dòng)的最終坐標(biāo)，然后調(diào)整元素位置即可
el.style.left = x' + 'px' el.style.top = y' + 'px'
代碼
<template>
<div class="ball-wrap" v-drag @touchmove.prevent>
<!-- 省略... -->
</div>
</template>
<script>
export default {
data() {
return {
isDrag: false
},
methods: {
click() {
if (this.isDrag) {
return
}
// 省略...
}
},
directives: {
drag(el, binding, vnode) {
/**
* 獲取客戶端可見內(nèi)容的高度
*
* @returns {number}
*/
const getClientHeight = () => {
return window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight)
}
/**
* 獲取客戶端可見內(nèi)容的寬度
*
* @returns {number}
*/
const getClientWidth = () => {
return window.innerWidth || Math.min(document.documentElement.clientWidth, document.body.clientWidth)
}
/**
* startX = null:獲取鼠標(biāo)相對(duì)于元素（左上頂點(diǎn)）的x軸坐標(biāo)（移動(dòng)前坐標(biāo)）
* startX != null:獲取移動(dòng)后的左上頂點(diǎn)x軸坐標(biāo)
*
* e.clientX:鼠標(biāo)相對(duì)客戶端（客戶端左上頂點(diǎn)）的x軸坐標(biāo)
* el.offsetLeft:元素頂點(diǎn)（左上頂點(diǎn)）相對(duì)客戶端（客戶端左上頂點(diǎn)）的x軸坐標(biāo)（元素必須脫離文檔流，position: fixed or absolute）
* el.clientWidth:元素寬度
*
* @param el
* @param e
* @param startX
* @returns {number}
*/
const getX = (el, e, startX) => {
if (startX === null) {
// 返回鼠標(biāo)相對(duì)于元素（左上頂點(diǎn)）的x軸坐標(biāo)
return e.clientX - el.offsetLeft
}
// 客戶端可視寬度
const clientWidth = getClientWidth()
// 元素自身寬度
const elWidth = el.clientWidth
// 移動(dòng)到x軸位置
let x = e.clientX - startX
// 水平方向邊界處理
if (x <= 0) {
// x軸最小為0
x = 0
} else if (x + elWidth > clientWidth) {
// x是左上頂點(diǎn)的坐標(biāo)，是否觸碰到右邊邊界（超出可視寬度）要通過(guò)右頂點(diǎn)判斷，所以需要加上元素自身寬度
x = clientWidth - elWidth
}
return x
}
/**
* startY = null:獲取鼠標(biāo)相對(duì)于元素（左上頂點(diǎn)）的y軸坐標(biāo)（移動(dòng)前坐標(biāo)）
* startY != null:獲取移動(dòng)后的左上頂點(diǎn)y軸坐標(biāo)
*
* e.clientY:鼠標(biāo)相對(duì)客戶端（客戶端左上頂點(diǎn)）的y軸坐標(biāo)
* el.offsetTop:元素頂點(diǎn)（左上頂點(diǎn)）相對(duì)客戶端（客戶端左上頂點(diǎn)）的y軸坐標(biāo)（元素必須脫離文檔流，position: fixed or absolute）
* el.clientHeight:元素高度
*
* @param el
* @param e
* @param startY
* @returns {number}
*/
const getY = (el, e, startY) => {
if (startY === null) {
// 返回鼠標(biāo)相對(duì)于元素（左上頂點(diǎn)）的y軸坐標(biāo)
return e.clientY - el.offsetTop
}
// 客戶端可視高度
const clientHeight = getClientHeight()
// 元素自身高度
const elHeight = el.clientHeight
// 移動(dòng)到y(tǒng)軸位置
let y = e.clientY - startY
// 垂直方向邊界處理
if (y <= 0) {
// y軸最小為0
y = 0
} else if (y + elHeight > clientHeight) {
// 同理，判斷是否超出可視高度要加上自身高度
y = clientHeight - elHeight
}
return y
}
/**
* 監(jiān)聽鼠標(biāo)按下事件（PC端拖動(dòng)）
*
* @param e
*/
el.onmousedown = (e) => {
vnode.context.isDrag = false
// 獲取當(dāng)前位置信息 (startX,startY)
const startX = getX(el, e, null)
const startY = getY(el, e, null)
/**
* 監(jiān)聽鼠標(biāo)移動(dòng)事件
*
* @param e
*/
document.onmousemove = (e) => {
// 標(biāo)記正在移動(dòng)，解決元素移動(dòng)后點(diǎn)擊事件被觸發(fā)的問(wèn)題
vnode.context.isDrag = true
// 更新元素位置（移動(dòng)元素）
el.style.left = getX(el, e, startX) + 'px'
el.style.top = getY(el, e, startY) + 'px'
}
/**
* 監(jiān)聽鼠標(biāo)松開事件
*/
document.onmouseup = () => {
// 移除鼠標(biāo)相關(guān)事件，防止元素?zé)o法脫離鼠標(biāo)
document.onmousemove = document.onmouseup = null
}
}
/**
* 監(jiān)聽手指按下事件（移動(dòng)端拖動(dòng)）
* @param e
*/
el.ontouchstart = (e) => {
// 獲取被觸摸的元素
const touch = e.targetTouches[0]
// 獲取當(dāng)前位置信息 (startX,startY)
const startX = getX(el, touch, null)
const startY = getY(el, touch, null)
/**
* 監(jiān)聽手指移動(dòng)事件
* @param e
*/
document.ontouchmove = (e) => {
// 獲取被觸摸的元素
const touch = e.targetTouches[0]
// 更新元素位置（移動(dòng)元素）
el.style.left = getX(el, touch, startX) + 'px'
el.style.top = getY(el, touch, startY) + 'px'
}
/**
* 監(jiān)聽手指移開事件
*/
document.ontouchend = () => {
// 移除touch相關(guān)事件，防止元素?zé)o法脫離手指
document.ontouchmove = document.ontouchend = null
}
}
}
}
}
</script>
<style scoped>
.ball-wrap {
position: fixed;
}
</style>drag 是我們自定義的指令，在需要滑動(dòng)的元素上綁定 v-drag 即可。
注意
自定義指令this指向問(wèn)題
在自定義指令 directives 內(nèi)不能訪問(wèn) this，如果需要修改 data 里的值，需要通過(guò) vnode.context.字段名 = 值 修改。
滑動(dòng)后點(diǎn)擊事件被觸發(fā)
鼠標(biāo)事件觸發(fā)順序：
mouseover - mousedown - mouseup - click - mouseout
滑動(dòng)的前提是鼠標(biāo)必須按下再滑動(dòng)，所以在我們滑動(dòng)完畢松開鼠標(biāo)時(shí)，click 事件會(huì)被觸發(fā)。
解決方法：定義一個(gè)標(biāo)志變量，表示是否是滑動(dòng)，點(diǎn)擊事件執(zhí)行時(shí)，將此變量作為前置條件，如果是在滑動(dòng)則不執(zhí)行。
// ...
data()
return {
isDrag: false
}
}
// ...
el.onmousedown = (e) => {
// ...
vnode.context.isDrag = false
document.onmousemove = (e) => {
// 標(biāo)記正在移動(dòng)，解決元素移動(dòng)后點(diǎn)擊事件被觸發(fā)的問(wèn)題
vnode.context.isDrag = true
// ...
}
}
// ...
methods: {
click() {
if (this.isDrag) {
return
}
// ...
}
}移動(dòng)端滑動(dòng)問(wèn)題
移動(dòng)端滑動(dòng)時(shí)會(huì)觸發(fā)默認(rèn)事件，導(dǎo)致滑動(dòng)卡頓。
在要觸發(fā)滑動(dòng)的元素上加上 @touchmove.prevent，以阻止默認(rèn)事件的發(fā)生。
源碼
https://github.com/anlingyi/xeblog-vue/blob/master/src/components/xe-pokeball/index.vue
