![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7b5eb4334318336358db37dc14aaa5ba.png)
1.自定义指令
directives: {
drag(el,data,vnode) {
const oDiv = el
oDiv.onmousedown = e => {
let iframDiv = document.getElementById("screenProjection")
if(iframDiv) {
console.log('按下')
iframDiv.style.pointerEvents = "none"
}
const disY = e.pageY - oDiv.offsetTop
document.onmousemove = e => {
if ( el.stopPropagation ) {
el.stopPropagation()
}
if ( el.preventDefault ) {
el.preventDefault()
}
let curT = e.pageY - disY
const scrModelEle = document.getElementsByClassName('screen-model')[0]
let minT = 0,maxT = scrModelEle.clientHeight - el.offsetHeight
curT = curT<minT?minT:(curT > maxT ? maxT : curT)
oDiv.style.top = curT + 'px'
}
document.onmouseup = e2 => {
if(iframDiv) {
iframDiv.style.pointerEvents = "auto"
}
document.onmousemove = null
document.onmouseup = null
if ( e.clientX == e2.clientX && e.clientY == e2.clientY ) {
vnode.context.showScreenInteraction()
}
}
return false
}
}
2.结构-拖拽元素加上v-drag;不绑定点击事件
<div v-drag ></div>
3.点击事件写在methods
showScreenInteraction() {
},