Vue3 自定义指令 元素拖拽移动
Vue.directive('drag', {
mounted(el: HTMLElement, binding) {
let offsetX: number, offsetY: number,
clientX: number, clientY: number,
windowWidth: number, windowHeight: number,
criticalX: number, criticalY: number,
padding = 20;
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
function move(event: MouseEvent) {
el.style.cursor = 'move'
offsetX = el.offsetLeft
offsetY = el.offsetTop
criticalX = windowWidth - offsetX - el.clientWidth
criticalY = windowHeight - offsetY - el.clientHeight
if ((offsetX > padding || event.movementX > 0) && (criticalX >= padding || (criticalX <= padding && event.movementX < 0))) {
el.style.left = offsetX + event.movementX + 'px'
}
if ((offsetY > padding || event.movementY > 0) && (criticalY >= padding || (criticalY <= padding && event.movementY < 0))) {
el.style.top = offsetY + event.movementY + 'px'
}
}
function destroy() {
el.removeEventListener("mousemove", move)
el.style.cursor = 'default'
window.removeEventListener("mouseup", destroy)
}
el.addEventListener("mousedown", function (event) {
clientX = event.clientX
clientY = event.clientY
el.addEventListener('mousemove', move)
window.addEventListener("mouseup", destroy)
el.addEventListener("mouseup", destroy)
})
}
})