let demo = document.querySelector('#demo') let canMove = false let x =0, y=0 demo.onmousedown = function(e) { x = e.pageX - demo.offsetLeft x = e.pageY - demo.offsetTop canMove = true }
demo.oncontextmenu = function (e){
e.preventDefault()
console.log('右键了');
}
setTimeout(()=>{
},2000)
window.onmouseup = function() {
canMove = false
console.log('up');
}
window.onblur = function(){
canMove = false
}
window.onmousemove = function(e) {
e.preventDefault();
if(canMove){
demo.style.left = e.pageX - x + 'px'
demo.style.top = e.pageY - y + 'px'
}
}
<!--先画个定位的DIV-->
<!--监听Mousedown mouseup mousemove-->
<!--定义一个变量来标记是否按下-->
<!--在Move中判断如果按下，则将鼠标位置赋值给DIV-->
<!--按下时记录鼠标与DIV的相对位置，移动时减去这段距离-->
<!--在move是阻止默认行为，防止拖动文字有bug-->
<!--监听blur事件，阻止窗口失去焦点导致bug-->
