拖拽的流程:鼠标按下(mousedown)→鼠标移动(mousemove)→鼠标松开(moveup)
需要理解的几个api:
- clientX/clientY: 相对于浏览器视窗内的位置坐标(不包括浏览器收藏夹和顶部网址部分)
- pageX/pageY: 该属性会考虑滚动,如果鼠标相对浏览器左边距离为100px,并向左滚动了200px,则pageX返回300px
- screenX/screenY:相对于屏幕的距离
- offsetLeft/offsetTop: 当前元素距离父辈元素的距离
具体实现:
et box = document.getElementById('box1')box.onmousedown = (e) =>{//获取鼠标在移动元素上的位置let x = e.clientX - box.offsetLeftlet y = e.clientY - box.offsetTopdocument.onmousemove = (event) => {let left = event.clientX - x //当前元素左边界距离当前视窗的位置let top = event.clientY - y //当前元素上边界距离当前视窗的位置box.style.left = left + 'px'box.style.top = top + 'px'}document.onmouseup = () => {document.onmousemove = nulldocument.onmouseup = null}}