<div @contextmenu.prevent="openMenu"
@mousedown="mouseMove"
style="position: absolute; left: 1px; top: 1px">
</div>
<template>
中屏蔽原生右键功能@contextmenu.prevent
,取代为自定义函数openMenu
,定义鼠标点击事件@mousedown
为自定的mouseMove
,同时在<div>
块中定义菜单右键选项
<ul v-show="visible">
<li>菜单1</li>
<li>菜单2</li>
</ul>
其中visiable
在data
中定义,并在watch
中监听,具体为:
data() {
return {
visible: false,
}
},
watch: {
visible(val) {
if (val) {
document.body.addEventListener('mousedown', this.closeMenu)
} else {
document.body.removeEventListener('mousedown', this.closeMenu)
}
}
}
接着在methods
中定义相应的方法
openMenu() {
this.visible = true
},
closeMenu() {
this.visible = false
},
mouseMove(e) {
if (e.which == 1) {
let currentEl = e.target
let disX = e.clientX - currentEl.offsetLeft
let disY = e.clientY - currentEl.offsetTop
// 屏蔽原生拖拽,必须!
document.ondragstart = (e) => {
e.preventDefault()
}
document.ondragend = (e) => {
e.preventDefault()
}
document.onmousemove = (e) => {
let left = e.clientX - disX
// 对超出范围的处理
left = left < 0 ? 0 : left
left = left > currentEl.parentElement.scrollWidth ? currentEl.parentElement.scrollWidth : left
let top = e.clientY - disY
// 对超出范围的处理
top = top > currentEl.parentElement.clientHeight ? currentEl.parentElement.clientHeight : top
top = top < 0 ? 0 : top
currentEl.style.left = left + 'px'
currentEl.style.top = top + 'px'
}
document.onmouseup = (e) => {
document.onmousemove = null
document.onmouseup = null
}
}
},
其中有屏蔽原生拖拽的方法:
document.ondragstart = (e) => {
e.preventDefault()
}
document.ondragend = (e) => {
e.preventDefault()
}
是必须要有的,如果不屏蔽原生拖拽,onmouseup
事件无法在onmousemove
过程中监听,造成的结果是虽然能成功实现拖拽功能,但是鼠标释放后还可以继续拖拽,直到第二次点击鼠标并释放。
另外要注意,该控件的position
属性必须设置为absolute
,父控件为relative
,代码中的currentEl.style.left = left + 'px'
能正确执行的前提条件是left的属性是在<div>
中设置,在css
中设置无效,使用css
设置时需要使用setAttrbutes
方法