<template>
<div v-drag class='div-class'></div>
// 定位最好用absoulte或者fixed,relative极大几率不生效
</template>
<script>
export default {
name: 'modalBlock',
props: {},
data () {
return {}
},
directives: {
drag (el) {
el.style.cursor = 'move'
el.onmousedown = function (e) {
var disx = e.pageX- el.offsetLeft;
var disy = e.pageY- el.offsetTop;
if (e.preventDefault) {
e.preventDefault()
} else {
e.returnValue = false // 解决快速频繁拖动滞后问题
}
document.onmousemove = function (e) {
// 鼠标位置-鼠标相对元素位置=元素位置
let left = e.clientX - disx;
let top = e.clientY - disy;
// 限制拖拽范围不超出可视区
if ( left <= 0) {
left = 5 // 设置成5,离边缘不要太近
} else if (left > document.documentElement.clientWidth - el.clientWidth) { // document.documentElement.clientWidth屏幕可视区宽度
left = document.documentElement.clientWidth - el.clientWidth - 5
}
if ( top <= 0) {
top = 5
} else if (top > document.documentElement.clientHeight - el.clientHeight) {
top = document.documentElement.clientHeight - el.clientHeight - 5
}
el.style.left = left + 'px'
el.style.top= top + 'px'
}
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null
}
}
}
}
}
</script>
vue 窗口拖拽事件v-drag(并且控制不超出屏幕可视区/解决频繁拖拽滞后问题)
最新推荐文章于 2024-07-12 13:47:08 发布