一个很酷的拖动层的js类，兼容IE及Firefox

自己优化修改了网上的一个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）属性来实现的，以增加用户体验。对于开发者来说，这样的实现可以作为一个基础，根据实际需求进行定制和扩展。