[已封装] DIV拖动类 支持在FF下拖动,调用简单 主要代码都有注释 适合初学者学习

调用方法
οnmοusedοwn="MyMove.Move('InfoKuang',event,1)"

<! 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=utf-8 "   />
< title > Div Move Temp </ title >
< style type = " text/css " >
body{
background - image:url(http: // mxd.sdo.com/web2005/download/image/wall_0201.jpg);
}
#InfoKuang {
    position:absolute;
    width:130px;
    height:85px;
    z - index: 1 ;
    filter:alpha(Opacity = 60 ,style = 0 );
    opacity: 0.6 ;
    padding: 3px;
    border: 1px dashed # 000000 ;
    z - index: 5000 ;
    bottom:31px;
                font - size:9pt;
                
    
    
}
#InfoKuang ul {
    margin: 1px;
    padding: 0px;
    border - top - width: 1px;
    border - right - width: 1px;
    border - bottom - width: 1px;
    border - left - width: 1px;
    border - top - style: none;
    border - right - style: none;
    border - bottom - style: solid;
    border - left - style: none;
    border - top - color: # 000000 ;
    border - right - color: # 000000 ;
    border - bottom - color: # 000000 ;
    border - left - color: # 000000 ;
    color: # 000000 ;
    background - color:#0faead;
}
#InfoKuang li {
    height:24px;
    padding: 1px;
    line - height: 24px;
}
</ style >
< script language = " javascript "   type = " text/javascript " >
// 通用 移动 Div 类
// 请保留一下我的信息,谢谢
// Edit By Skybot
// QQ:35287352
function  Tong_MoveDiv()
{
     // 参数说明
     //  id 要移动的层ID 
     //  Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event;
     //  T 为 int 有数字是拖动 没有是变大小
     this .Move = function (Id,Evt,T)
    {
         if (Id == "" )  return ;
         var  o  =  document.getElementById(Id);
         if ( ! o)  return ; // 如果这个东东不在
        evt  =  Evt  ?  Evt : window.event;
        o.style.position  =   " absolute " ; // 设定他的样式为绝对定位
        o.style.zIndex  =   200 ; // 这里显示上下的
         var  obj  =  evt.srcElement  ?  evt.srcElement : evt.target;  // 得到个原素  使它在FF中也可以用
         // 得到当前对要移动对象的 坐标
         var  w  =  o.offsetWidth;
         var  h  =  o.offsetHeight;
         var  l  =  o.offsetLeft;
         var  t  =  o.offsetTop;
         var  div  =  document.createElement( " DIV " ); // 新原素DIV
        document.body.appendChild(div);
        div.style.cssText  =   " filter:alpha(Opacity=10,style=0);opacity:0.2;width: " + w + " px;height: " + h + " px;top: " + t + " px;left: " + l + " px;position:absolute;background:#000 " ; // 设定 filter； 注意opacity 是FF中的 Opacity
        div.setAttribute( " id " , Id  + " temp " );
        
         if (T) // 看看是拖动还是 变大小
        {
             this .Move_OnlyMove(Id,evt);
        }
         else
        {
            
        }
    }
    
     // 移动函数
     // 参数 Id  要移动的层ID 
     // Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event;
     this .Move_OnlyMove  =   function (Id,Evt)
    {
         var  o  =  document.getElementById(Id + " temp " );
         if ( ! o)  return ;
        evt  =  Evt ? Evt:window.event; // 都是FF 才要这么写的
         var  relLeft  =  evt.clientX  -  o.offsetLeft; // 得到左边的 宽度
         var  relTop  =  evt.clientY  -  o.offsetTop; // 得到上边的 宽度
         // 抓取 事件
         if  ( ! window.captureEvents)
        {
            o.setCapture();  // 指定  抓取 事件
        
        }
         else
        {
            window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
        }
        
         // 文档的 onmousemove 事件
        document.onmousemove  =   function (e)
        {
             if  ( ! o)  return ;
            e  =  e  ?  e : window.event;
             if  (e.clientX  -  relLeft  <=   0 )
                o.style.left  =   0   + " px " ;
             else   if  (e.clientX  -  relLeft  >=  document.documentElement.clientWidth  -  o.offsetWidth  -   2 )
                o.style.left  =  (document.documentElement.clientWidth  -  o.offsetWidth  -   2 )  + " px " ;
             else
                o.style.left  =  e.clientX  -  relLeft  + " px " ;
             if  (e.clientY  -  relTop  <=   1 )
                o.style.top  =   1   + " px " ;
             else   if  (e.clientY  -  relTop  >=  document.documentElement.clientHeight  -  o.offsetHeight  -   30 )
                o.style.top  =  (document.documentElement.clientHeight  -  o.offsetHeight  -   30 )  + " px " ;
             else
                o.style.top  =  e.clientY  -  relTop  + " px " ;
        }
        
         // 文档的 onmouseup 事件
        document.onmouseup  =   function ()
        {
             if  ( ! o)  return ;
             if  ( ! window.captureEvents)
                o.releaseCapture();
             else
                window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
             var  o1  =  document.getElementById(Id);
             if  ( ! o1)  return ;
             var  l0  =  o.offsetLeft;
             var  t0  =  o.offsetTop;
             var  l  =  o1.offsetLeft;
             var  t  =  o1.offsetTop;    
            MyMove.Move_e(Id, l0 , t0, l, t);
            document.body.removeChild(o);
            o  =   null ;
        }    
    }
    
     this .Move_e  =   function (Id, l0 , t0, l, t)
    {
         if  ( typeof (window[ " ct " +  Id])  !=   " undefined " ) clearTimeout(window[ " ct " +  Id]);
         var  o  =  document.getElementById(Id);
         if  ( ! o)  return ;
         var  sl  =  st  =   8 ;
         var  s_l  =  Math.abs(l0  -  l);
         var  s_t  =  Math.abs(t0  -  t);
         if  (s_l  -  s_t  >   0 )
             if  (s_t)
                sl  =  Math.round(s_l  /  s_t)  >   8   ?   8  : Math.round(s_l  /  s_t)  *   6 ;
             else
                sl  =   0 ;
         else
             if  (s_l)
                st  =  Math.round(s_t  /  s_l)  >   8   ?   8  : Math.round(s_t  /  s_l)  *   6 ;
             else
                st  =   0 ;
         if  (l0  -  l  <   0 ) sl  *=   - 1 ;
         if  (t0  -  t  <   0 ) st  *=   - 1 ;
         if  (Math.abs(l  +  sl  -  l0)  <   52   &&  sl) sl  =  sl  >   0   ?   2  :  - 2 ;
         if  (Math.abs(t  +  st  -  t0)  <   52   &&  st) st  =  st  >   0   ?   2  :  - 2 ;
         if  (Math.abs(l  +  sl  -  l0)  <   16   &&  sl) sl  =  sl  >   0   ?   1  :  - 1 ;
         if  (Math.abs(t  +  st  -  t0)  <   16   &&  st) st  =  st  >   0   ?   1  :  - 1 ;
         if  (s_l  ==   0   &&  s_t  ==   0 )  return ;
         if  (Math.abs(l  +  sl  -  l0)  <   2 )
            o.style.left  =  l0  + " px " ;
         else
            o.style.left  =  l  +  sl  + " px " ;
         if  (Math.abs(t  +  st  -  t0)  <   2 ) 
            o.style.top  =  t0  + " px " ;
         else
            o.style.top  =  t  +  st  + " px " ;
        window[ " ct " +  Id]  =  window.setTimeout( " MyMove.Move_e(' " +  Id  + " ',  " +  l0  + "  ,  " +  t0  + " ,  " +  (l  +  sl)  + " ,  " +  (t  +  st)  + " ) " ,  1 );
    }
    
    
}
var  MyMove  =   new   Tong_MoveDiv();
</ script >
</ head >
< body >
< div id = " InfoKuang "  onmousedown = " MyMove.Move('InfoKuang',event,1) " >
< span style = " cursor:move; " > 点我调用 拖动窗口 </ span >
     < ul >
         < li >
        
         </ li >
     </ ul >
     < ul >
         < li >
        显示窗口
         </ li >
     </ ul >
     < ul >
         < li >
        最大化窗口
         </ li >
     </ ul >
</ div >
</ body >
</ html >

 要查看效果請點:http://bbs.blueidea.com/thread-2784653-1-1.html