原生js拖拽三部曲

js拖拽效果的主要事件：onmousedown（鼠标按下），onmousemove（鼠标移动），onmouseup（鼠标抬起）

var contain = document.getElementsByClassName("contain")[0]
			contain.onmousedown = (e) =>{
				e = e || event;  //兼容写法
				var x = e.clientX;
				var y = e.clientY;
				var gapX = x - e.target.offsetLeft
				var gapY = y - e.target.offsetTop
				document.onmousemove = (e) =>{//此处是document而不是盒子对象，因为鼠标在整个文档动
					e = e || event;
					contain.style.left = e.clientX - gapX + 'px'; 
					contain.style.top = e.clientY - gapY + 'px'; 
					//window.innerWidth为浏览器的可视宽度
					//ie写法为document.body.clientHeight或document.documentElement.clientWidth
					var maxX = window.innerWidth-contain.offsetWidth
					var maxY = window.innerHeight-contain.offsetHeight
					//为了让盒子不超出浏览器要做判断
					if(e.clientX - gapX  < 0){
						contain.style.left = 0	
					}else if(e.clientX - gapX > maxX ){
						contain.style.left = maxX + "px"
					}
					
					if(e.clientY - gapY < 0){
						contain.style.top = 0	
					}else if(e.clientY - gapY > maxY){
						contain.style.top = maxY + "px"
					}
				}
				document.onmouseup = (e) =>{
					e = e || event;
					document.onmousemove = null // 这一步是为了避免鼠标抬起时，继续移动
				}
			}