自己优化修改了网上的一个JS拖动类,增加了拖动时显示半透明的特效。 //www.jb51.net/article/16122.htm注意,本文类中的Cminfo类请 查看://www.jb51.net/article/18760.htm 代码如下://*********************************移动层 函数 开始******************************************* //生成拖动层很简单,只需要(参数之一如果是数组表示局部拖动,arr[0]表示拖动层,arr[1]表示整体) //new divDrag([‘test’], [getObjec 在JavaScript编程中,拖动功能是一项常见的交互设计,它允许用户通过鼠标操作页面元素,使其在界面上自由移动。在给定的标题和描述中提到的"一个很酷的拖动层的js类,兼容IE及Firefox",指的是一个经过优化的JavaScript拖动功能实现,该实现具有兼容性,不仅能在现代浏览器如Firefox上运行,还支持老旧的Internet Explorer(IE)浏览器。 我们要理解拖动层的基本原理。拖动层通常是通过监听鼠标的`mousedown`、`mousemove`和`mouseup`事件来实现的。当用户按下鼠标左键(`mousedown`)时,记录下当前元素的位置和鼠标位置;在鼠标移动过程中(`mousemove`),根据鼠标的新位置更新元素的位置;当用户释放鼠标左键(`mouseup`)时,停止更新元素位置。 在提供的代码片段中,可以看到`divDrag`函数作为拖动层的构造函数,用于初始化拖动行为。这个函数接收参数,这些参数可以是单一的元素ID或者包含多个元素ID的数组,以实现局部或整体拖动。例如,`new divDrag([‘test’], [getObject(‘test31’),getObject(‘test3’)], getObject(‘test1’) ,getObject(‘test2’) ,[getObject(‘test41’),getObject(‘test4’)])`这一行代码表示创建一个新的`divDrag`实例,用于拖动指定的DOM元素。 代码中,`dragStart`、`dragMove`和`dragEnd`函数分别对应拖动的开始、移动和结束阶段。在`dragStart`函数中,获取初始位置信息,并设置鼠标移动和释放事件的处理函数。`dragMove`函数计算鼠标移动后元素的新位置,并更新CSS的`top`和`left`属性,以实现拖动效果。`dragEnd`函数则负责解除事件监听,结束拖动过程。 为了兼容不同的浏览器,代码使用了条件语句来处理不同浏览器对CSS属性和事件监听方式的支持差异。例如,使用`document.defaultView.getComputedStyle`来获取元素的样式值,如果浏览器不支持,就回退到`currentStyle`属性。同样,使用`addEventListener`和`removeEventListener`处理事件监听,如果不被支持,则使用IE的`attachEvent`和`detachEvent`。 此外,注意到代码中有一个扩展数组的方法`Array.prototype.extend`,它用于合并两个或更多数组,将所有元素添加到原始数组中。这在处理多个可拖动元素时可能非常有用。 这个拖动层的JavaScript实现利用了JavaScript事件处理和DOM操作,结合了浏览器兼容性策略,提供了一个可以在IE和Firefox上工作的拖动层功能。它还包括了一个独特的特性,即在拖动过程中显示半透明的特效,这可能是通过改变元素的透明度(opacity)属性来实现的,以增加用户体验。对于开发者来说,这样的实现可以作为一个基础,根据实际需求进行定制和扩展。
![](https://csdnimg.cn/release/download_crawler_static/13586459/bg1.jpg)
![audio/mpeg](https://img-home.csdnimg.cn/images/20210720083646.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![text/html](https://img-home.csdnimg.cn/images/20210720083451.png)
![thumb](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![html](https://img-home.csdnimg.cn/images/20210720083451.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 5
- 资源: 952
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
最新资源
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)
评论0