一个很酷的拖动层的js类,兼容IE及Firefox

 更新时间:2009年06月23日 12:50:53   作者:  
自己优化修改了网上的一个JS拖动类,增加了拖动时显示半透明的特效。

自己优化修改了网上的一个JS拖动类,增加了拖动时显示半透明的特效。 https://www.jb51.net/article/16122.htm
注意,本文类中的Cminfo类请 查看:
https://www.jb51.net/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);
}
//*********************************移动层 函数 结束*******************************************

相关文章

  • 微信小程序自定义模态弹窗组件详解

    微信小程序自定义模态弹窗组件详解

    这篇文章主要为大家详细介绍了微信小程序自定义模态弹窗组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • js捕获鼠标右键菜单中的粘帖事件实现代码

    js捕获鼠标右键菜单中的粘帖事件实现代码

    突发奇想比如点击菜单中的粘帖后事件如何捕获,如下图所示,用的jQuery中的paste事件,如想获得粘帖文本要使用setTimeout控制下时间,感兴趣的朋友可以参考下
    2013-04-04
  • JavaScript判断数组类型的方法

    JavaScript判断数组类型的方法

    这篇文章主要介绍了JavaScript判断数组类型的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • javaScript函数中执行C#代码中的函数方法总结

    javaScript函数中执行C#代码中的函数方法总结

    这篇文章介绍了javaScript函数中执行C#代码中的函数方法总结,有需要的朋友可以参考一下
    2013-08-08
  • JS生成不重复的随机数组的简单实例

    JS生成不重复的随机数组的简单实例

    下面小编就为大家带来一篇JS生成不重复的随机数组的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • javascript 通用loading动画效果实例代码

    javascript 通用loading动画效果实例代码

    这篇文章主要介绍了javascript 通用loading动画效果实例代码,有需要的朋友可以参考一下
    2014-01-01
  • javascript用defineProperty实现简单的双向绑定方法

    javascript用defineProperty实现简单的双向绑定方法

    这篇文章主要介绍了javascript用defineProperty实现简单的双向绑定方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • JavaScript实现随机产生字符串的方法分享

    JavaScript实现随机产生字符串的方法分享

    这篇文章主要为大家详细介绍了JavaScript中实现随机产生字符串的方法,文中的示例代码简洁易懂,对我们学习JavaScript有一定的帮助,需要的可以参考一下
    2022-11-11
  • 微信小游戏之使用three.js 绘制一个旋转的三角形

    微信小游戏之使用three.js 绘制一个旋转的三角形

    three.js是一个可以使用javascript绘制3d图形的库,它对WebGL的api进行封装,使开发更加方便,就像jQuery对DOM的api进行封装一样。这篇文章主要介绍了微信小游戏之使用three.js 绘制一个旋转的三角形,需要的朋友可以参考下
    2019-06-06
  • JS 数组和对象的深拷贝操作示例

    JS 数组和对象的深拷贝操作示例

    这篇文章主要介绍了JS 数组和对象的深拷贝操作,结合实例形式分析了JS 数组和对象的深拷贝基本原理与操作技巧,需要的朋友可以参考下
    2020-06-06

最新评论