如何实现弹出框的推拽效果?

这里写自定义目录标题弹出框的拖拽效果实现1、弹出框推拽的效果2、实现原理3、具体代码弹出框的拖拽效果实现1、弹出框推拽的效果我们在上网的时候,经常会遇到各种弹出框,我们可以通过鼠标移动这些弹出框,从而不影响我们的预览体验。具体来说,就是当鼠标按下并且开始移动弹出框,之后松开鼠标,弹出框就停止移动。这种效果主要使用到JS里用来获取盒子的位置、大小的offsetTop 和 offsetLeft系列。2、实现原理首先需要了解的是一些鼠标事件:mousedown: 鼠标按下mousemove:
摘要由CSDN通过智能技术生成

弹出框的拖拽效果实现

1、弹出框推拽的效果

我们在上网的时候,经常会遇到各种弹出框,我们可以通过鼠标移动这些弹出框,从而不影响我们的预览体验。
具体来说,就是当鼠标按下并且开始移动弹出框,之后松开鼠标,弹出框就停止移动。这种效果主要使用到JS里用来获取盒子的位置、大小的offsetTop 和 offsetLeft系列。

2、实现原理

首先需要了解的是一些鼠标事件:
mousedown: 鼠标按下
mousemove: 鼠标移动
mouseup: 鼠标松开
以及 一些获取坐标的方法:
e.pageX(e.pageY): 这个是获取鼠标在整个页面中的坐标(!!这里的页面是我们的浏览窗口这个可视区,意思就是加入页面被我们缩小了,那么这个坐标也会变化)
node.offsetLeft(node.offsetTop) : 这个是得到这个node元素节点相对于加了定位的父级元素(如果没有加定位,就是相对于body元素的)

在拖拽过程中,鼠标移动过程中,将获得的最新的值赋值给弹出框的left和top值,这样弹出框就可以跟着鼠标走了;具体如下图:

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值