一个很酷的拖动层的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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
javascript string字符串优化问题
Jul 31 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
js实现for循环跳过undefined值示例
Jul 02 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
德生H-501的评价与改造
2021/03/02 无线电
php实现telnet功能示例
2014/04/08 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
一些常用的Javascript函数
2006/12/22 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
python障碍式期权定价公式
2019/07/19 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
django中media媒体路径设置的步骤
2019/11/15 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
python递归函数用法详解
2020/10/26 Python
三星印度官网:Samsung印度
2019/08/03 全球购物
迟到检讨书400字
2014/01/13 职场文书
保健品市场营销方案
2014/03/31 职场文书
感谢信模板大全
2015/01/23 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL