javasctipt闭包之拖拽

最新推荐文章于 2025-07-18 22:21:39 发布

a9529lty

最新推荐文章于 2025-07-18 22:21:39 发布

阅读量804

点赞数

分类专栏： Javascript 文章标签： function ie div 浏览器

Javascript 专栏收录该内容

133 篇文章

订阅专栏

本文介绍了一种使用JavaScript闭包实现元素拖拽的方法。通过简单的代码示例，展示了如何利用闭包保存鼠标相对于元素的位置，并在鼠标移动时更新元素的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文的传送门在这里http://bbs.51js.com/viewthread.php?tid=85895&extra=page%3D1

原文如下：（写的很不错，决定收藏了）

闭包之拖拽原来如此简单！！！

先运行效果看哈。不然，又有同学没有看帖子的欲望了。

所用公式：

拖动 = {
Element.left = 鼠标.left - 鼠标拖动前距元素左边的距离(闭包)；
Element.top = 同理。
}

代码解释：

1. 兼容浏览器：
var e = window.event || e; // ie || ff
var _x = e.offsetX || e.layerX; // ie || ff
var _y = e.offsetY || e.layerY; // ie || ff
o.style.filter = 'Alpha(opacity=50)'; // ie
o.style.opacity = '0.5'; // ff

2. 闭包：
把 _x 和 _y 先存起来，当执行 onmousemove 时再用它。

3. 原理
1) 当 div 执行 onmousedown 时，掉用 Drag 函数，传入参数 “元素”和“事件”；
2) 保存鼠标距元素 left 和 top 的距离，等待执行 onmousemove 和 onmouseup；
3) onmousemove 时，修改元素“透明度”和“坐标值”；
4) onmouseup 时，清空 “onmousemove 的指向” 和 “透明度的值”；

结束篇：
申明：本人不是搞前端的，是纯粹的js爱好者。
发贴的原因：
1.周末没事干。
2.老是潜水不道德:P。
3.向学js的同学们回馈下所学的内容，希望对他们有所帮助。
期望：有帐号的同学多拍砖，多提意见。