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'
	    }
	}
}

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值