一个很酷的拖动层的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和s3captche实现一个水果名字的验证
Aug 14 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
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
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
理解javascript回调函数
2014/12/28 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
jQuery的框架介绍
2016/05/11 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
Django的session中对于用户验证的支持
2015/07/23 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
keras 多gpu并行运行案例
2020/06/10 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
银行会计职员个人的自我评价
2013/09/29 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
比较node.js和Deno
2021/04/27 Javascript