js实现限定范围拖拽的示例
限定范围拖拽
目录
代码实例
*{
padding:0;
margin:0;
}
#box1{
width:500px;
height:500px;
background:#999;
position:relative;
left:100px;
top:100px;
}
#box{
width:100px;
height:100px;
background:#334;
position:absolute;
cursor:move;
}
(function(){
vardragging=false
varboxX,boxY,mouseX,mouseY,offsetX,offsetY
varbox=document.getElementById('box')
varbox1=document.getElementById('box1')
//鼠标按下的动作
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=box1.clientWidth-box.offsetWidth
varheight=box1.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
}
}
})()
与简易拖拽的差异
简易拖拽的链接
可移动位置的改变
//此处就是父元素的宽度减去子元素宽度
varwidth=box1.clientWidth-box.offsetWidth
varheight=box1.clientHeight-box.offsetHeight
下载源码链接
星辉的Github
以上就是js实现限定范围拖拽的示例的详细内容，更多关于js实现限定范围拖拽的资料请关注毛票票其它相关文章！
