解析vue界面中可拖动<div>、<img>

在界面中拖拽某个元素，用户经历的过程是：点击，拖动，松开，即onmousedown、onmousemove、onmouseup。

div的拖动

若要拖动div,首先应在div上添加绑定事件@mousedown=“mousedown”,这样当点击div时可触发相应函数。

 <div
   width="150px" height="150px"
     @mousedown="mousedown" 
     :style="'position:fixed;left:'+left+'px;top:'+top+'px;'"/>
 </div>

在mousedown函数中首先要继续监听当前标签的onmousemove事件，当用户点击并移动时触发。此时去监控鼠标的点击位置，获取鼠标点击的窗口坐标clientX,clientY与鼠标在标签内的坐标offsetX,offsetY，通过相减即可得到标签在浏览器中的坐标（clientX-offsetX，clientY-offsetY）。并把这个坐标动态赋值给div，即实现了拖动div。最后当鼠标抬起时onmouseup销毁onmousemove事件。

public left:number=0;
public top:number=0;
 public  mousedown(e:any){
      document.onmousemove = (e2) => {
        this.left=e2.clientX-e.offsetX;
        this.top=e2.clientY-e.offsetY;
      };
      document.onmouseup = ()=> {
          document.onmousemove=null;
          document.onmousedown=null;
      };
  }

img的拖动

img标签的拖动与div的拖动思路是一样的，只是作为img标签在拖动时需要禁用浏览器默认事件。在onmousedown中引用下方函数即可

 public pauseEvent(e:any){
    if(e.stopPropagation) e.stopPropagation();//阻止把事件分派到其他节点。
    if(e.preventDefault) e.preventDefault();//阻止默认事件
    e.cancelBubble=true;//阻止冒泡
	e.returnValue=false;//阻止IE的默认事件
	return false;
}