js实现简易拖拽的示例

2023-07-13 06:54:03 73

简易拖拽

代码实例
代码解析
scrollWidth,clientWidth,offsetWidth的区别
offsetX,clientX,pageX的辨析
下载源码链接

代码实例

(function(){ vardragging=false varboxX,boxY,mouseX,mouseY,offsetX,offsetY varbox=document.getElementById('box') //鼠标按下的动作 box.onmousedown=down //鼠标的移动动作 document.onmousemove=move //释放鼠标的动作 document.onmouseup=up //鼠标按下后的函数,e为事件对象 functiondown(e){ dragging=true //获取元素所在的坐标 boxX=box.offsetLeft boxY=box.offsetTop //获取鼠标所在的坐标 mouseX=parseInt(getMouseXY(e).x) mouseY=parseInt(getMouseXY(e).y) //鼠标相对元素左和上边缘的坐标 offsetX=mouseX-boxX offsetY=mouseY-boxY } //鼠标移动调用的函数 functionmove(e){ if(dragging){ //获取移动后的元素的坐标 varx=getMouseXY(e).x-offsetX vary=getMouseXY(e).y-offsetY //计算可移动位置的大小，保证元素不会超过可移动范围 varwidth=document.documentElement.clientWidth-box.offsetWidth varheight=document.documentElement.clientHeight-box.offsetHeight //min方法保证不会超过右边界，max保证不会超过左边界 x=Math.min(Math.max(0,x),width) y=Math.min(Math.max(0,y),height) //给元素及时定位 box.style.left=x+'px' box.style.top=y+'px' } } //释放鼠标的函数 functionup(e){ dragging=false } //函数用于获取鼠标的位置 functiongetMouseXY(e){ varx=0,y=0 e=e||window.event 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 } return{ x:x, y:y } } })()

代码解析

在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实现简易拖拽的资料请关注毛票票其它相关文章！

js实现简易拖拽的示例

热门推荐

随机推荐