鼠标拖拽通用盒子

组件盒子：

css:
.father_box{
	width: 100%;
	height: 100%;
	background: #28B6C0;
	position: relative;
	overflow: hidden;
}
.t_box{
	width: 100px;
	height: 100px;
	background: #0096FF;
	position: absolute;
	left:100px;
	top: 200px;
}

<div //父盒子
  class="father_box" 
  ref="father_box">
	<div //内容盒子
	  ref="t_box" 
	  class="t_box"
	  @mousedown="moveTest"></div>
</div>

js:
moveTest(e){
	let odiv = this.$refs.t_box;

	let x= e.offsetX;//记录鼠标到t_box边框x轴距离
	let y = e.offsetY//记录鼠标到t_box边框y轴距离
	document.onmousemove = (e)=>{
		let disX = e.clientX-this.$refs.father_box.getBoundingClientRect().left-x;
		let disY = e.clientY-this.$refs.father_box.getBoundingClientRect().top-y;
		console.log(e.clientX,e.offsetX)
		// let left = e.offsetX-x;
		// let top = e.offsetY-y;
		odiv.style.left = disX + "px";
		odiv.style.top = disY + "px";
	};
	document.onmouseup = e => {
		//console.log("停止")
		document.onmousemove = null;
		document.onmouseup = null;
	};
				
},