Vue3自定义drag指令详解

// 拖拽的指令
class Drap {
	static zIndex = 1;
	constructor(el, option = {}) {
		this.el = el;
		this.x = 0;
		this.y = 0;
		this.option = option;
		this.init();
		this.timeOutEvent = 0;
		this.ele = null
	}
	init() {
		this.setEleStyle(this.option || {});
		//拖拽事件赋值给头部标签，此处代码可实现仅在移动头部时操作整个DOM块
		// this.ele = this.el.getElementsByClassName('header')[0]
		// if(this.ele){
		// 	this.ele.onmousedown = (e) => {
		// 		this.onMouseDown(e)
		// 		this.el.setCapture && this.el.setCapture() //全局捕获
		// 	}
		// }else{
		// 	this.el.onmousedown = (e) => {
		// 		this.onMouseDown(e)
		// 		this.el.setCapture && this.el.setCapture() //全局捕获
		// 	}
		// }
		this.el.onmousedown = (e) => {
			this.gtouchstart(e)
		}
	}
	
	//样式设置
	setEleStyle(option) {
		for (const key in option) {
			this.el.style[key] = option[key]
		}
	}
	//按下ele
	onMouseDown(e) {
		let zIndex = getComputedStyle(this.el).getPropertyValue('z-index');
		zIndex = isNaN(zIndex) ? 1 : zIndex
		Drap.zIndex = Drap.zIndex > zIndex ? Number(Drap.zIndex) + 1 : Number(zIndex) + 1
		this.setEleStyle({
			"zIndex": Drap.zIndex,
			position: 'fixed',
			'cursor': 'move'
		})
		this.x = e.clientX - this.el.offsetLeft;
		this.y = e.clientY - this.el.offsetTop;
		document.onmousemove = (e) => this.onMouseMove(e);
		document.onmouseup = (e) => this.onMouseUp(e)
	}
	//移动move
	onMouseMove(e) {
		this.gtouchmove()
		let X = e.clientX - this.x
		let Y = e.clientY - this.y
    //下面代码操作DOM元素不会移出屏幕，-25应更换为-10，按自己需求设置
		if (X < 0) {
			X = 0
		} else if (X > document.documentElement.clientWidth - this.el.offsetWidth) {
			X = document.documentElement.clientWidth - this.el.offsetWidth - 25
		}
		if (Y < 0) {
			Y = 0
		} else if (Y > document.documentElement.clientHeight - this.el.offsetHeight) {
			Y = document.documentElement.clientHeight - this.el.offsetHeight - 25
		}
		this.el.style.left = X + 'px'
		this.el.style.top = Y + 'px'
	}
	//释放
	onMouseUp(e) {
		this.gtouchend()
		document.onmousemove = null
		document.onmouseup = null
		this.setEleStyle({
			'cursor': 'pointer'
		})
		this.el.setCapture && this.el.setCapture() //释放全局捕获
	}
	gtouchstart(e) {
		this.timeOutEvent = setTimeout(() => {
			this.timeOutEvent = 0;
			//真正长按后应该执行的内容
			console.log("长按事件触发发");
			this.onMouseDown(e)
			this.el.setCapture && this.el.setCapture() //全局捕获
		}, 200); 
		return false;
	}
	gtouchmove() {
		clearTimeout(this.timeOutEvent); //清除定时器
		this.timeOutEvent = 0;
		console.log("取消了");
	}
	gtouchend() {
		clearTimeout(this.timeOutEvent); //清除定时器
		if (this.timeOutEvent !== 0) {
			console.log("你这是点击，不是长按");
		}
		return false;
	}
}
const drag = {
	mounted(el, binding) {
		new Drap(el, binding.value || {})
	}
}
export default drag

import drag from './directives/drag.js'
app.directive('drag', drag)

<div class="m-dia" v-if="dialogShow" v-drag>
    <mini-dialog @closed="closedMini"></mini-dialog>
</div>

.m-dia {
    position: absolute;
    top: 75%;
    left: 70%;
}