原生js拖拽元素(onmouseup不能够触发的原因)

from: https://www.cnblogs.com/IwishIcould/p/13501598.html

我们经常会遇见拖拽某一个元素的场景，拖拽也是很常用的；
这次拖拽遇见一个问题，有时在拖拽的时候吗，鼠标松开，元素仍然可以拖拽；
经过查阅资料，发现:
会触发H5原生的拖拽事件。并且不会监听到onmouseup,
从而导致鼠标松开也能够拖拽。
解决办法就是直接干掉H5的拖拽事件

document.ondragstart = function(ev) {
	ev.preventDefault();
};
document.ondragend = function(ev) {
	ev.preventDefault();
};

		
<script type="text/javascript">
window.onload = function(){
	var drag = document.getElementById('drag');
	// //点击某物体时，用drag对象即可，move和up是全局区域，
	// 也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)  
   
	// 按下
	drag.onmousedown = function(event){
		console.log("drag按下的时候触发 " , )
		var event = event || window.event;  //兼容IE浏览器
		//    鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
	         var diffX = event.clientX - drag.offsetLeft;
	         var diffY = event.clientY - drag.offsetTop;
	         if(typeof drag.setCapture !== 'undefined'){
			  drag.setCapture(); 
	         }
	   
	   
		// 移动
		document.onmousemove = function(event){
			var event = event || window.event;
			var moveX = event.clientX - diffX;
			var moveY = event.clientY - diffY;
			if(moveX < 0){
				moveX = 0
			}else if(moveX > window.innerWidth - drag.offsetWidth){
				moveX = window.innerWidth - drag.offsetWidth
			}
			if(moveY < 0){
				moveY = 0
			}else if(moveY > window.innerHeight - drag.offsetHeight){
				moveY =  window.innerHeight - drag.offsetHeight
			}
			drag.style.left = moveX + 'px';
			drag.style.top = moveY + 'px'
		}
	
		// 抬起停止移动
		document.onmouseup = function(event){
			console.log(  "抬起停止移动" )
			this.onmouseup = null;
			this.onmousemove = null;
			
			 //修复低版本ie bug  
			if(typeof drag.releaseCapture!='undefined'){  
			   drag.releaseCapture();  
			}  
		}
		
		// 解决有些时候,在鼠标松开的时候,元素仍然可以拖动;
		document.ondragstart = function(ev) {
			ev.preventDefault();
			console.log(1212)
		};
		document.ondragend = function(ev) {
			ev.preventDefault();
			console.log("asd")
		};
		
						
	}
}
</script>