directives: {
drag(el) {
// 解决拖动会选中文字的问题
document.onselectstart = () => {
return false
}
el.onmousedown = function (event) {
// 解决子元素 input 框无法输入等情况
if(event.target?.nodeName == 'INPUT' || event.target?.nodeName == 'IMG') {
return
}
const startX = event.clientX
const startY = event.clientY
const left = el.offsetLeft
const top = el.offsetTop
const elWidth = el.clientWidth
const elHeight = el.clientHeight
const documentWidth = document.documentElement.clientWidth
const documentHeight = document.documentElement.clientHeight
document.onmousemove = function (event) {
const X = event.clientX - startX
const Y = event.clientY - startY
// 限制拖拽不允许超出可视区
if (X + left < 0) {
el.style.left = '0px'
} else if (X + left > documentWidth - elWidth - 5) {
el.style.left = `${documentWidth - elWidth - 5}px`
} else {
el.style.left = `${X + left}px`
}
if (Y + top < 0) {
el.style.top = '0px'
} else if (Y + top > documentHeight - elHeight - 5) {
el.style.top = `${documentHeight - elHeight - 5}px`
} else {
el.style.top = `${Y + top}px`
}
}
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null
}
return false
}
}
},
