js实现简易拖拽的示例
简易拖拽
目录
- 代码实例
- 代码解析
- scrollWidth,clientWidth,offsetWidth的区别
- offsetX,clientX,pageX的辨析
- 下载源码链接
代码实例
代码解析
在document对象上绑定mousemove和mouseup事件,不在拖拽的元素上绑定是因为当鼠标移动太快而超出元素的范围时会停止拖拽,而绑定在document上则可以避免这样的事情发生。拖拽再快都不会超出document的范围。
//鼠标按下的动作 box.onmousedown=down //鼠标的移动动作 document.onmousemove=move //释放鼠标的动作 document.onmouseup=up
HTMLElement.offsetLeft是一个只读属性,返回当前元素左上角相对于HTMLElement.offsetParent节点的左边界偏移的像素值。
//获取元素所在的坐标 boxX=box.offsetLeft boxY=box.offsetTop
一般鼠标的位置使用pageX/pageY获取,但是IE不支持这两个属性。所以在IE中使用event.clientX+document.body.scrollLeft-document.body.clientLeft;获取鼠标的位置
if(e.pageX){ x=e.pageX y=e.pageY }else{ x=e.clientX+document.body.scrollLeft-document.body.clientLeft y=e.clientY+document.body.scrollTop-document.body.clientTop }
scrollWidth,clientWidth,offsetWidth的区别
定义
- scrollWidth:对象的实际内容的宽度,不包括边线宽度
- clientWidth:对象内容的可视区的宽度,不包括边线宽度
- offsetWidth:对象整体的实际宽度,包括滚动条等边线
情况一
元素内无内容或者内容不超过可视区,滚动不出现或不可用
scrollWidth=clientWidth
offsetWidth为元素的实际宽度
情况二
元素的内容超过可视区,滚动条出现和可用
scrollWidth>clientWidth
offsetWidth为元素的实际宽度
offsetX,clientX,pageX的辨析
offsetX,offsetY
指鼠标指针相对于触发事件元素的左上角的偏移,在Chrome,Opera,Safari中指外边缘,即将该元素边框的宽度计算在内,firefox则不包含边框值
pageX,pageY
指相对文档窗口左上角的距离,不会随滚动条移动
clientX,clientY
指相对于浏览器可视窗口左上角的距离,参照点会随滚动条滚动而移动
下载源码链接
星辉的Github
以上就是js实现简易拖拽的示例的详细内容,更多关于js实现简易拖拽的资料请关注毛票票其它相关文章!