当前位置:Gxlcms > JavaScript > jQuery拖动div、移动div、弹出层实现原理及示例_jquery

jQuery拖动div、移动div、弹出层实现原理及示例_jquery

时间:2021-07-01 10:21:17 帮助过:12人阅读

代码演示:

http://www.imqing.com/demo/movediv.html

大概原理:

使div的position为绝对定位absolute,然后控制其top与left值,需要监听鼠标事件,主要用到mousedown, mousemove, mouseup。

在mousedown后,记录mousedown时鼠标与需要移动的div的位置,然后取得两者之差,得到在鼠标移动后,div的位置。即:

left = 当前鼠标位置.x - (鼠标点击时的.x值 - div的初始位置x值)
top = 当前鼠标位置.y - (鼠标点击时的.y值 - div的初始位置y值)

代码:
代码如下:





Qing's Web