微客导航 » 文章资讯 » js实现磁性吸附的示例

js实现磁性吸附的示例

2023-07-13 06:46:03 191

磁性吸附

目录

代码实例
与限定范围拖拽的差异
下载源码链接

代码实例

*{
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) //磁性吸附部分 if(x

与限定范围拖拽的差异

简易拖拽的链接

限定范围拖拽的链接

添加磁性吸附部分

//磁性吸附部分
if(x
下载源码链接
星辉的Github
以上就是js实现磁性吸附的示例的详细内容，更多关于js实现磁性吸附的资料请关注毛票票其它相关文章！

返回顶部
3162201930
czq8825@qq.com