记录下简单实用的vue拖拽元素指令drag.js(instructionjs)//绑定事件函数_addEvent(el,eventName,fn){if(document.addEventListener){el.addEventListener(eventName,fn,false);}elseif(window.attachEvent){el.attactEvent('on'+eventName,fn);}};//解开事件函数_offEvent(el,eventName,fn){if(document.removeEventListener){el.removeEventListener(eventName,fn,false);}elseif(window.detachEvent){el.detachEvent('on'+eventName,fn);}};exportdefault{bind(el,binding,vnode){if(!binding.value.dragElSelector){console.error('需要传递被拖动元素的选择器，参数名：dragElSelector')return;}if(binding.value.useDrag===false){返回；}constdialogHeaderEl=el.querySelector(binding.value.dragElSelector);constdragDom=el;//是否使用边界，如果使用边界，则元素不会被拖出窗口constuseBoundary=binding.value.useBoundary!==false;constonDrag=binding.value.onDrag;dialogHeaderEl.style.cssText+=';cursor:move;';//获取原始属性即domelement.currentStyleFirefoxGooglewindow.getComputedStyle(dom元素,null);constgetStyle=(function(){如果(window.document.currentStyle){return(dom,attr)=>dom.currentStyle[attr]}else{return(dom,attr)=>getComputedStyle(dom,false)[attr]}})()letmouseDownEvent=(e)=>{//console.log(e.clientX,e.clientY)//console.log(vnode);//鼠标点击下，计算当元素距离可视区的距离constdisX=e.clientX-dialogHeaderEl.offsetLeftconstdisY=e.clientY-dialogHeaderEl.offsetTopconstdragDomWidth=dragDom.offsetWidthconstdragDomWidh=constscreenDomWidHeight=dragDom.offsetthight文档.body.clientWidth||window.innerWidth常量screenHeight=document.body.clientHeight||window.innerHeightconstminDragDomLeft=dragDom.offsetLeftconstmaxDragDomLeft=screenWidth-dragDom.offsetLeft-dragDomWidthconstminDragDomTop=dragDom.offsetTopconstmaxDragDomTop=screenHeight-dragDom.offsetTop-dragDomHeight//console.log('minDragDomTop',minDragDomTop,maxDragDomTop)//console.log('screenHeight',screenHeight)//获取的值替换为px正则匹配letstyL=getStyle(dragDom,'left')letstyT=getStyle(dragDom,'top')if(styL.includes('%')){styL=+document.body.clientWidth*(+styL.replace(/%/g,'')/100)styT=+document.body.clientHeight*(+styT.replace(/%/g,'')/100)}else{styL=+styL.replace(/px/g,'')styT=+styT.replace(/px/g,'')}让mouseMoveEvent=(e)=>{e.preventDefault();//通过事件委托，计算移动距离letleft=e.clientX-disXlettop=e.clientY-disYif(useBoundary){//边界处理if(-(left)>minDragDomLeft){left=-minDragDomLeft}elseif(left>maxDragDomLeft){left=maxDragDomLeft}//console.log('topmaxDragDomTop',top,maxDragDomTop)if(-top>minDragDomTop){top=-minDragDomTop}elseif(top>maxDragDomTop){top=最大博士agDomTop}}//移动当前元素dragDom.style.cssText+=`;left:${left+styL}px;top:${top+styT}px;`//执行onDrag事件if(typeofonDrag==='函数'){onDrag();}};_addEvent（文档，'mousemove'，mouseMoveEvent）；让mouseUpEvent=function(){_offEvent(document,'mousemove',mouseMoveEvent);_offEvent（文档，'mouseup'，mouseUpEvent）；}_addEvent（文档，'mouseup'，mouseUpEvent）；};_addEvent(dialogHeaderEl,'mousedown',mouseDownEvent);}}使用
