昆明设计网站建设深圳网站托管

拖拽的流程：鼠标按下(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}}