一个很酷的拖动层的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 Array(数组)相关方法简述
Jul 25 Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
Swiper实现导航栏滚动效果
Oct 16 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中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
php分页代码学习示例分享
2014/02/20 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
学习ExtJS Panel常用方法
2009/10/07 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
Python闭包函数定义与用法分析
2018/07/20 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
一行python实现树形结构的方法
2019/08/09 Python
Django继承自带user表并重写的例子
2019/11/18 Python
python中for in的用法详解
2020/04/17 Python
英文求职信结束语大全
2013/10/26 职场文书
校运会口号
2014/06/18 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
2015年副班长工作总结
2015/05/15 职场文书
python unittest单元测试的步骤分析
2021/08/02 Python
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android