Hello world.

javascript js 拖动效果 兼 ie 6,7,8 firefox Chrome（原创，想要尽管拿去用。技术支持：QQ3084532）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta name="支持" content="作者Ryan，技术支持Qq 3084532" />
    <title>上面拖动</title>
    <style type="text/css">
        .stadium_member
        {
            width: 224px;
        }
        .stadium_member_title
        {
            font-weight: bold;
            color: #51853B;
            height: 25px;
            width: 220px;
            padding-left: 4px;
            border-bottom-width: 1px;
            border-bottom-style: dashed;
            border-bottom-color: #A1A1A1;
            line-height: 25px;
            cursor:default;
        }
        .stadium_member_tool
        {
            float: right;
        }
        .stadium_member_title h2
        {
            font-size: 14px;
            margin: 0px;
            float: left;
        }
        .stadium_member_content
        {
            width: 224px;
            clear: both;
            background-color:Olive;
        }
        .touming
        {
            filter: Alpha(opacity=50); /*ie私有*/
            -moz-opacity: .5;/*FireFox 私生子*/
            opacity: 0.5;/*W3C之子*/
            border:1px solid #333333;
        }
        </style>
</head>
<body>
    <div id="stadium_memberDiv">
        <div class="stadium_member">
            <div class="stadium_member_title">
                <h2>
                    忍者神龟</h2>
                <div class="stadium_member_tool">
                    <a href="javascript:void(0);" onclick="Stadium_mini(this);">-</a> <a href="javascript:void(0);" onclick="Stadium_close(this);">
                        X</a></div>
            </div>
            <div class="stadium_member_content">
                米开朗基罗<br />
                达芬奇<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                </div>
        </div>
        <div class="stadium_member">
            <div class="stadium_member_title">
                <h2>
                    我的团长我的团</h2>
                <div class="stadium_member_tool">
                    <a href="javascript:void(0);" onclick="Stadium_mini(this);">-</a> <a href="javascript:void(0);" onclick="Stadium_close(this);">
                        X</a></div>
            </div>
            <div class="stadium_member_content">
                neirong</div>
        </div>
        <div class="stadium_member">
            <div class="stadium_member_title">
                <h2>
                    人间大炮</h2>
                <div class="stadium_member_tool">
                    <a href="javascript:void(0);" onclick="Stadium_mini(this);">-</a> <a href="javascript:void(0);" onclick="Stadium_close(this);">
                        X</a></div>
            </div>
            <div class="stadium_member_content">
                neirong</div>
        </div>
        
                <div class="stadium_member">
            <div class="stadium_member_title">
                <h2>
                    魔神坛斗士</h2>
                <div class="stadium_member_tool">
                    <a href="javascript:void(0);" onclick="Stadium_mini(this);">-</a> <a href="javascript:void(0);" onclick="Stadium_close(this);">
                        X</a></div>
            </div>
            <div class="stadium_member_content">
                neirong
                <br />adfsdfsd<br />
                光辉神<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                </div>
        </div>
    </div>
<p>
    &nbsp;</p>
<p>
    &nbsp;</p>
    <div id="test"></div>
</body>
</html>

<script type="text/javascript">
<!--
var dragname="stadium_memberDiv";

function $(obj)
{
    return typeof(obj)=="string"?document.getElementById(obj):obj;
}

function Stadium_mini(o)
{
    if(window.isIE)
        //他爹的爹的爹的第二个孩子。
        tagObj=o.parentNode.parentNode.parentNode.childNodes[1];
        
    else
        //他爹的爹的爹的第四个孩子。（FF的私生子太多）
        tagObj=o.parentNode.parentNode.parentNode.childNodes[3];
    if(tagObj.style.display=="")
    {
        tagObj.style.display="none";
    }
    else
    {
        tagObj.style.display="";
    }
}
function Stadium_close(o)
{
    tagObj=o.parentNode.parentNode.parentNode;
    tagObj.style.display="none";
}


window.onload=function(){
    on_ini();
    menuAs=$(dragname).childNodes;
    
    for(var i=0; i<menuAs.length;i++)
    {
        if(menuAs[i].className=="stadium_member")
        {
            if(window.isIE)//咱整个拖动容易么，还TNND要jian各种东西。
                drag(menuAs[i].firstChild);
            else
                drag(menuAs[i].childNodes[1]);
        }
        else
            continue;
    }
//    var menuAs=$(dragname).getElementsByTagName("div");
//    for(var i=0; i<menuAs.length; i++)
//    {
//        drag(menuAs[i]);
//    }        
};

function on_ini()
{
    String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false}
    var agent=navigator.userAgent;
    window.isOpr=agent.inc("Opera");
    window.isIE=agent.inc("IE")&&!isOpr;
    window.isMoz=agent.inc("Mozilla")&&!isOpr&&!isIE;
    if(isMoz)
    {
       Event.prototype.__defineGetter__("x",function(){return this.clientX+2});
       Event.prototype.__defineGetter__("y",function(){return this.clientY+2});
    }
    
    basic_ini();
}

function basic_ini()
{
    //删除节点
    window.oDel=function(obj)
    {
        if($(obj)!=null)
            {
                $(obj).parentNode.removeChild($(obj));
            }
     }
}

function drag(dv){
dv.onmousedown=function(e){
       var d=document;
       e = e || window.event;
     
          //左键才可拖动
       if (e.which == null)
          /* IE case */
          button= (e.button < 2) ? "LEFT" : ((e.button == 4) ? "MIDDLE" : "RIGHT");
      else
          /* All others */
          button= (e.which < 2) ? "LEFT" : ((e.which == 2) ? "MIDDLE" : "RIGHT");
      if(button!="LEFT")
      {
        return false;
      }    
     
     //整个父层移动
     dv.pn=dv.parentNode;
     
      var x= e.layerX || e.offsetX;
       var y= e.layerY || e.offsetY;
     
        dv.xy=getxy(dv.pn);
        dv.mxy=
        {
            "mx":e.clientX-dv.xy.left,
            "my":e.clientY-dv.xy.top
        };//鼠标在对象的内部位置  json数据 技术支持：http://www.ibm.com/developerworks/cn/web/wa-lo-json/
     
      //设置捕获范围
       if(dv.setCapture){
          dv.setCapture();
       }else if(window.captureEvents){
          window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
       }
       
       //拖动事件是否首次启动  目的：阻止拖动对象上的click事件不被执行（IE)
       var dragfirst=true;
       
       
      //移动函数
      d.onmousemove=function(e){
           e= e || window.event;
        if(dragfirst)//拖动事件启动 首次加载
        {
           //在原有位置添加一个层
           //创建层
            var om=document.createElement("div");
            dv.otemp=om;
            om.style.width=dv.xy.width + "px";
            om.style.height=dv.xy.height + "px";
            om.style.border="1px dashed #999999";
            //om.style.background-color="#eeeeee";
            
            dv.pn.parentNode.insertBefore(om,dv.pn);

           //设置该对象浮动
           dv.pn.style.position="absolute";
           dv.pn.oldcss=dv.pn.className;
           dv.pn.className="touming";
           dv.style.cursor="move";

           dragfirst=false;
        }

           var tx=e.clientX-dv.mxy.mx;//-x;
           var ty=e.clientY-dv.mxy.my;//-y;
           dv.pn.style.left=tx+"px";
           dv.pn.style.top=ty+"px";
           
           
              createtmpl(dv,e);
              
        d.onselectstart=function()
        {
            return false
        }
        
    };//end onmousemove

        d.onmouseup=function(){
          //取消捕获范围
            if(dv.releaseCapture){
              dv.releaseCapture();
            }else if(window.captureEvents){
              window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            }

          if(!dragfirst)
          {
              dv.otemp.parentNode.insertBefore(dv.pn,dv.otemp);
              oDel(dv.otemp);               dv.pn.style.position="";               dv.pn.className=dv.pn.oldcss;       dv.style.cursor="";
      }
          //清除事件
          d.onmousemove=null;          d.onmouseup=null;          d.onselectstart=null;
       };//end onmouseup

        
   };
}//end function drag(dv)


    //比较，挨个层比较
    function createtmpl(dv,e)
    {
        menuAs=$(dragname).childNodes;
        //遍历所有可拖动层
        for(var i=0;i<menuAs.length;i++)
        {
            if(menuAs[i]==dv.pn || menuAs[i]==dv.otemp || As[i].className!="stadium_member")
                continue;
            var b=inner(menuAs[i],e);
            
            if(b=="no")
                continue;
            
            //在上边
            if(b=="up")
            {
                menuAs[i].parentNode.insertBefore(dv.otemp,menuAs[i]);
            }
            else//在下边
            {
                if(menuAs[i].nextSibling==null)
                     menuAs[i].parentNode.appendChild(dv.otemp);
                else
                     menuAs[i].parentNode.insertBefore(dv.otemp,menuAs[i].nextSibling);
            }
         }
         return false;
    }//end createtemp
    
    function inner(o,e)
    {
        var a=getxy(o);
        //判断是否在框里
        //if(e.x>a.left && e.x<(a.left+a.width) && e.y>a.top && e.y<(a.top+a.height))   //判断是否在一个矩形里
        //if(e.x>a.left && e.x<(a.left+a.width))//左右移动
        if(e.y>a.top && e.y<(a.top+a.height))//上下移动
        {
            if(e.y<(a.top+a.height/2))
                return "up";
            else
                return "down";
        }
        else
        {
            return "no";
         }
    }

    //一个对象 位置和大小
    function getxy(o)
    {
        var t=o.offsetTop;        var l=o.offsetLeft;        var w=o.offsetWidth;        var h=o.offsetHeight;
        while(o=o.offsetParent)
        {
           t+=o.offsetTop;           l+=o.offsetLeft;
        }
        var j=
        {
           "width":w,           "height":h,           "top":t,           "left":l
        };//json数据格式 技术支持在上方有URL自己找
       return j;
    }
//现在做个东西容易么，要兼容各种浏览器。容易么~
//-->
</script>
posted on 2009-04-16 15:15  Ryan.zhu  阅读(1083)  评论(0)  编辑  收藏  举报
come soon on