一个很酷的拖动层的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 相关文章推荐
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 Javascript
一些常用的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 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
Python中每次处理一个字符的5种方法
2015/05/21 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
详解python eval函数的妙用
2017/11/16 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
医学院学生的自我评价分享
2013/11/19 职场文书
物流专业自荐信
2014/05/23 职场文书
网吧消防安全责任书
2014/07/29 职场文书
个人投资合作协议书
2014/10/12 职场文书
大学生学年个人总结
2015/02/15 职场文书
建国大业观后感600字
2015/06/01 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
nginx容器方式反向代理实战
2022/04/18 Servers