360网站提交,网页设计总结报告500字,中国免费素材网站,3网站建设公司拖拽的流程#xff1a;鼠标按下(mousedown)→鼠标移动(mousemove)→鼠标松开(moveup)
需要理解的几个api#xff1a;
clientX/clientY: 相对于浏览器视窗内的位置坐标#xff08;不包括浏览器收藏夹和顶部网址部分#xff09;pageX/pageY: 该属性会考虑滚动#xff0c;如…拖拽的流程鼠标按下(mousedown)→鼠标移动(mousemove)→鼠标松开(moveup)
需要理解的几个api
clientX/clientY: 相对于浏览器视窗内的位置坐标不包括浏览器收藏夹和顶部网址部分pageX/pageY: 该属性会考虑滚动如果鼠标相对浏览器左边距离为100px并向左滚动了200px则pageX返回300pxscreenX/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 pxbox.style.top top px}document.onmouseup () {document.onmousemove nulldocument.onmouseup null}}
