一个很酷的拖动层的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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
js使用心得分享
Jan 13 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 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 XML备份Mysql数据库
2009/05/27 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
Python爬取国外天气预报网站的方法
2015/07/10 Python
Python每天必学之bytes字节
2016/01/28 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
安全生产计划书
2014/05/04 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
新教师个人总结
2015/02/06 职场文书
2015年商场工作总结
2015/04/27 职场文书
使用Java去实现超市会员管理系统
2022/03/18 Java/Android