一个很酷的拖动层的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 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
理解javascript回调函数
Dec 28 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
js实现头像上传并且可预览提交
Dec 25 Javascript
React Fragment介绍与使用详解
Nov 11 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中的正则表达式以及模式匹配
2013/06/19 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
php实现的农历算法实例
2015/08/11 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
医学院护理专业应届生求职信
2013/11/12 职场文书
企业内控岗位的职责
2014/02/07 职场文书
技能比武方案
2014/05/21 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
公司离职证明样本
2014/09/13 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
企业年会祝酒词
2015/08/11 职场文书
课改心得体会范文
2016/01/25 职场文书
施工安全责任协议书
2016/03/23 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers