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 // 这一步是为了避免鼠标抬起时,继续移动 } }