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

 

转自： http://www.cnblogs.com/flysnow-z/archive/2009/04/16/1437266.html

<! 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 >

转载于:https://www.cnblogs.com/qiantuwuliang/archive/2009/06/11/1501706.html