JS实现鼠标拖动 , 不会因为鼠标移动太快, 脱离范围导致停下来

调用该方法即可, 原理是将鼠标移动和松开左键(弹起) 从div转移到window上

/**
 * 鼠标拖动  拖动
 * @param id   这里是 querySelector获取 , 因此需要  '#dragBox' ,带选择器
 * @returns {{}}
 */
function Drag(id) {
	//获取元素。
	let demo = document.querySelector(id)  // '#dragBox'
	let canMove = false
	let x = 0, y = 0
	
	
	//鼠标按下事件 
	demo.onmousedown = function (e) {  // 如果只想按住该元素内某一个元素才能拖动的话 , 将左边的这个demo改成该元素
	    x = e.pageX - demo.offsetLeft
	    y = e.pageY - demo.offsetTop
	    canMove = true
	}
	// console.log(demo.offsetLeft);
	
	//demo自定义右键窗口
	demo.oncontextmenu = function (e) {
	    e.preventDefault()//阻止默认行为
	    // console.log('右键了');
	}
	//鼠标松开事件
	window.onmouseup = function () {
	    canMove = false
	}
	//当前窗口失去焦点。
	window.onblur = function () {
	    canMove = false
	}
	//鼠标移动事件
	window.onmousemove = function (e) {
	    e.preventDefault(); //阻止默认行为
	    if (canMove) {
	        let left = e.pageX - x
	        let top = e.pageY - y
	        if (left < 0) left = 0
	        if (top < 0) top = 0
	        let maxLeft = window.innerWidth - demo.offsetWidth
	        let maxTop = window.innerHeight - demo.offsetHeight
	        if (left > maxLeft) left = maxLeft
	        if (top > maxTop) top = maxTop
	        demo.style.left = left + "px"
	        demo.style.top = top + 'px'
	    }
	}
}