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

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

(0)

相关推荐

  • js实现可拖动DIV的方法

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的   mousemove事件 3.取消事件 然后我们看一下代码: 复制代码 代码如

  • js实现图片拖动改变顺序附图

    在web页面中,需要改变多个元素的位置,可以通过元素拖动来实现.HTML5中加入了一个全局属性draggable,通过设置true/false来控制元素是否可拖动. 下面以图片拖动为例,用jQuery来实现:页面上有多个图片,把一个图片拖动到其他两个图片中间,就可以将这个图片的位置插入到两图之间. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <style> .img-div img { width:200px; heig

  • JS高级拖动技术 setCapture,releaseCapture

    复制代码 代码如下: <script type="text/javascript"> <!-- window.onload=function(){ objDiv = document.getElementById('drag'); drag(objDiv); }; function drag(dv){ dv.onmousedown=function(e){ var d=document; e = e || window.event; var x= e.layerX |

  • html+javascript实现可拖动可提交的弹出层对话框效果

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JAVASCRI

  • js 鼠标拖动对象 可让任何div实现拖动效果

    js鼠标拖动对象: 复制代码 代码如下: //定义鼠标拖动对象 drag=function (a,o){      var d=document;if(!a)a=window.event;         if(!a.pageX)a.pageX=a.clientX;         if(!a.pageY)a.pageY=a.clientY;      var x=a.pageX,y=a.pageY;      if(o.setCapture)          o.setCapture();

  • javascript html5 canvas实现可拖动省份的中国地图

    本文实例分享了html5 canvas可拖动省份的中国地图实现方法,供大家参考,具体内容如下 1.数据获取 画地图需要省份边界坐标,理论上可以每次都用百度API获取数据并绘图,但为了增加效率,首先将所有坐标都获取下来并存入数据库中. 新建省份数据数组 复制代码 代码如下: var allZoneData = [{'name':'辽宁省','been':'yes','id':'01'},<span style="font-family: Arial, Helvetica, sans-seri

  • javascript 事件处理、鼠标拖动效果实现方法详解

    先看看要拖动的层(模拟窗口)的效果图吧. 要实现的拖动效果:鼠标左键在窗口上方的标题栏上按下,同时移动鼠标,窗口跟着移动.窗口: 复制代码 代码如下: <div id="win"> <div id="win_header"></div> </div> 一点准备工作: 要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute): 给窗口添加标题栏,这里使用一个放在窗口顶部的层实现,同时将标

  • javascript之可拖动的iframe效果代码

    // HISTORY// ------------------------------------------------------------------// Jan 23, 2004: Fixed problems which caused the script not to work in//               some framed situations. Improved browser support.//               Added easier "addH

  • javascript html5轻松实现拖动功能

    拖放(drag和drop)是html5标准组成,下面我们从五个方面对其进行叙述,分别是如何成为拖动物体,如何成为拖动目标,拖动物体上拥有的事件,拖动目标上拥有的事件以及拖放物体间如何传递信息. 拖动物体上拥有的事件 dragstart (在物体刚被拖动时触发) drag (在dragstart事件触发之后就被触发) dragend (拖动事件结束时触发) 拖动目标上拥有的事件 dragenter (当拖拽元素进入放置目标时触发) dragover (当拖拽元素在放置目标中移动时触发,类似于mou

  • 比较精简的Javascript拖动效果函数代码

    拖动效果函数演示 by Longbill.cn body { font-size:12px; color:#333333; border : 0px solid blue; } div { position : absolute; background-color : #c3d9ff; margin : 0px; padding : 5px; border : 0px; width : 100px; height:100px; } function drag(o,s) { if (typeof

随机推荐