解析vue界面中可拖动、

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

div的拖动

若要拖动div,首先应在div上添加绑定事件@mousedown=“mousedown”,这样当点击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;
}

你可能感兴趣的:(js)