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


Posted in Javascript onJune 23, 2009

自己优化修改了网上的一个JS拖动类,增加了拖动时显示半透明的特效。 https://3water.com/article/16122.htm
注意,本文类中的Cminfo类请 查看:
https://3water.com/article/18760.htm

//*********************************移动层 函数 开始******************************************* 
//生成拖动层很简单,只需要(参数之一如果是数组表示局部拖动,arr[0]表示拖动层,arr[1]表示整体) 
//new divDrag(['test'], [getObject('test31'),getObject('test3')], getObject('test1') ,getObject('test2') ,[getObject('test41'),getObject('test4')]); 
//记得有拖动属性的层position:absolute; 
Array.prototype.extend = function(C){for(var B=0,A=C.length;B<A;B++){this.push(C[B]);}return this;} 
function divDrag() 
{ 
    var A,B,gCn; 
    var zIndex = 1; 
    this.dragStart = function(e) 
    { 
        e = e||window.event; 
        if((e.which && (e.which!=1))||(e.button && (e.button!=1))){return;} 
        var pos = this.gPos; 
        gCn = this.parent||this; 
        if(document.defaultView) 
        { 
            _top = document.defaultView.getComputedStyle(gCn,null).getPropertyValue("top"); 
            _left = document.defaultView.getComputedStyle(gCn,null).getPropertyValue("left"); 
        } 
        else 
        { 
            if(gCn.currentStyle) 
            { 
                _top = gCn.currentStyle["top"]; 
                _left = gCn.currentStyle["left"]; 
            } 
        } 
        pos.ox = (e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(_left); 
        pos.oy = (e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(_top); 
        if(!!A) 
        { 
            if(document.removeEventListener) 
            { 
                document.removeEventListener("mousemove",A,false); 
                document.removeEventListener("mouseup",B,false); 
            } 
            else 
            { 
                document.detachEvent("onmousemove",A); 
                document.detachEvent("onmouseup",B); 
            } 
        } 
        A = this.dragMove.create(this); 
        B = this.dragEnd.create(this); 
        if(document.addEventListener) 
        { 
            document.addEventListener("mousemove",A,false); 
            document.addEventListener("mouseup",B,false); 
        } 
        else 
        { 
            document.attachEvent("onmousemove",A); 
            document.attachEvent("onmouseup",B); 
        } 
        gCn.style.zIndex = (++zIndex); 
    } 
    this.dragMove = function(e) 
    { 
        e = e||window.event; 
        var pos = this.gPos; 
        gCn = this.parent||this; 
        gCn.style.top = (e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(pos.oy)+'px'; 
        gCn.style.left = (e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(pos.ox)+'px'; 
        try{if(CMInfo.Bs_Name=='IE'){gCn.style.filter = "alpha(opacity=70)";}else{gCn.style.opacity = "0.7";}}catch(e){} 
        this.stop(e); 
    } 
    this.dragEnd = function(e) 
    { 
        var pos = this.gPos; 
        e = e||window.event; 
        if((e.which && (e.which!=1))||(e.button && (e.button!=1))){return}; 
        gCn = this.parent||this; 
        if(!!(this.parent)){this.style.backgroundColor = pos.color;} 
        try{if(CMInfo.Bs_Name=='IE'){gCn.style.filter = "alpha(opacity=100)";}else{gCn.style.opacity = 1;}}catch(e){} 
        if(document.removeEventListener) 
        { 
            document.removeEventListener("mousemove",A,false); 
            document.removeEventListener("mouseup",B,false); 
        } 
        else 
        { 
            document.detachEvent("onmousemove",A); 
            document.detachEvent("onmouseup",B); 
        } 
        A = null; 
        B = null; 
        gCn.style.zIndex = (++zIndex); 
        this.stop(e); 
    } 
    this.shiftColor = function() 
    { 
        this.style.backgroundColor="#EEEEEE";                                     
    } 
    this.position = function (e) 
    { 
        var t=e.offsetTop; 
        var l=e.offsetLeft; 
        while(e=e.offsetParent) 
        { 
            t += e.offsetTop; 
            l += e.offsetLeft; 
        } 
        return {x:l,y:t,ox:0,oy:0,color:null} 
    } 
    this.stop = function(e) 
    { 
        if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble=true;} 
        if(e.preventDefault){e.preventDefault();}else{e.returnValue=false;} 
    } 
    this.create = function(bind) 
    { 
        var B = this; 
        var A = bind; 
        return function(e){return B.apply(A,[e]);} 
    } 
    this.dragStart.create = this.create; 
    this.dragMove.create = this.create; 
    this.dragEnd.create = this.create; 
    this.shiftColor.create = this.create; 
    this.initialize = function() 
    { 
        for(var A=0,B=arguments.length;A<B;A++) 
        { 
            C=arguments[A]; 
            if(!(C.push)){C = [C];} 
            gC = (typeof(C[0])=='object')?C[0]:(typeof(C[0])=='string'?getObject(C[0]):null); 
            if(!gC){continue}; 
            gC.gPos = this.position(gC); 
            gC.dragMove = this.dragMove; 
            gC.dragEnd = this.dragEnd; 
            gC.stop = this.stop; 
            if(!!C[1]) 
            { 
                gC.parent = C[1]; 
                gC.gPos.color = gC.style.backgroundColor; 
            } 
            if(gC.addEventListener) 
            { 
                gC.addEventListener("mousedown",this.dragStart.create(gC),false); 
                if(!!C[1]){gC.addEventListener("mousedown",this.shiftColor.create(gC),false);    } 
            } 
            else 
            { 
                gC.attachEvent("onmousedown",this.dragStart.create(gC)); 
                if(!!C[1]){gC.attachEvent("onmousedown",this.shiftColor.create(gC));} 
            } 
        } 
    } 
    this.initialize.apply(this,arguments); 
} 
//*********************************移动层 函数 结束*******************************************
Javascript 相关文章推荐
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
写一个Vue Popup组件
Feb 25 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
一些常用的JS功能函数代码
Jun 23 #Javascript
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 #Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 #Javascript
IE JS编程需注意的内存释放问题
Jun 23 #Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 #Javascript
javascript form 验证函数 弹出对话框形式
Jun 23 #Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 #Javascript
You might like
用PHP函数解决SQL injection
2006/10/09 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
Python可变参数函数用法实例
2015/07/07 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Python如何将字符串转换为日期
2020/07/31 Python
利用指针变量实现队列的入队操作
2012/04/07 面试题
五一口号
2014/06/19 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
iPhone13再次曝光
2021/04/15 数码科技
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
详解SQL的窗口函数
2022/04/21 Oracle