dragClass.ts
class Drap{ static zIndex = 1; constructor(el,option={}){ this.el = el; this.x=0; this.y=0; this.option = option; this.init(); } init(){ this.setEleStyle(this.option||{}); this.el.onmousedown =(e)=>{ this.onMouseDown(e) this.el.setCapture&&this.el.setCapture() //全局捕获 return false } } //样式设置 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.parentNode.offsetLeft; this.y= e.clientY-this.el.parentNode.offsetTop; document.onmousemove=(e)=>this.onMouseMove(e); document.onmouseup = (e)=>this.onMouseUp(e) } //移动move onMouseMove(e){ let X = e.clientX-this.x let Y = e.clientY-this.y; if(X<10-this.el.offsetWidth){ X=10-this.el.offsetWidth }else if(X>document.documentElement.clientWidth-10){ X =document.documentElement.clientWidth-10 } if(Y<10-this.el.clientHeight){ Y=10-this.el.clientHeight }else if(Y>document.documentElement.clientHeight-10){ Y =document.documentElement.clientHeight-10 } X = X < 100 ? 100 : X Y = Y < 63 ? 63 : Y let dx = document.documentElement.clientWidth - this.el.parentNode.offsetWidth let dy = document.documentElement.clientHeight - this.el.parentNode.clientHeight X = X > dx ? dx : X Y = Y > dy ? dy : Y this.el.parentNode.style.left = X+'px' this.el.parentNode.style.top = Y+'px' } //释放 onMouseUp(e){ document.onmousemove = null document.onmouseup =null // this.setEleStyle({'cursor': 'pointer'}) this.el.setCapture&&this.el.setCapture() //释放全局捕获 } } export default Drap
drag.ts
import Drap from './dragClass'; export const drag = { mounted(el, binding) { new Drap(el,binding.value||{}) } }
app.ts引入
import {drag} from "./directive/VDrag/drag"
app.directive('drag', drag)