Jquery div拖动 简单实例

　　今天用jquery实现了一个很简单的拖动...实现思路很简单  如下:

 

　　　event.offsetX   eventoffsetY　发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。

　　   event.clientX  获取鼠标的水平位置

  　　 event.clientY  获取鼠标的垂直位置

　　   ousedown事件在鼠标在元素上点击后会触发

　　   mousemove 事件通过鼠标在元素上移动来触发

　　  mouseout事件在鼠标从元素上离开后会触发

代码

    
      

     
       
     
       <
     
       style
     
       >
     
       
 #Drigging
 {
 width:200px;
 background:#CCC;
 border:solid 1px #
     
       666
     
       ;
 height:80px;
 line
     
       -
     
       height:80px;
 text
     
       -
     
       align:center;
 position:absolute;
 }

     
       <
     
       /
     
       style>
     
       

     
       <
     
       script src
     
       =
     
       "
     
       ../js/jquery-1.3.1.js
     
       "
     
       ><
     
       /
     
       script>
     
       

     
       <
     
       script type
     
       =
     
       "
     
       text/javascript
     
       "
     
       >
     
       
 $(
     
       function
     
       (){
 
     
       var
     
        bool
     
       =
     
       false
     
       ;
 
     
       var
     
        offsetX
     
       =
     
       0
     
       ;
 
     
       var
     
        offsetY
     
       =
     
       0
     
       ;
 $(
     
       "
     
       #Drigging
     
       "
     
       ).mousedown(
     
       function
     
       (){
 bool
     
       =
     
       true
     
       ;
 offsetX 
     
       =
     
        event.offsetX;
 offsetY 
     
       =
     
        event.offsetY;
 $(
     
       this
     
       ).css(
     
       '
     
       cursor
     
       '
     
       ,
     
       '
     
       move
     
       '
     
       );
 })
 .mouseup(
     
       function
     
       (){
 bool
     
       =
     
       false
     
       ;
 })
 $(document).mousemove(
     
       function
     
       (e){
 
     
       if
     
       (
     
       !
     
       bool)
 
     
       return
     
       ;
 
     
       var
     
        x 
     
       =
     
        event.clientX
     
       -
     
       offsetX;
 
     
       var
     
        y 
     
       =
     
        event.clientY
     
       -
     
       offsetY;
 $(
     
       "
     
       #Drigging
     
       "
     
       ).css(
     
       "
     
       left
     
       "
     
       , x);
 $(
     
       "
     
       #Drigging
     
       "
     
       ).css(
     
       "
     
       top
     
       "
     
       , y);
 
 })
 })

     
       <
     
       /
     
       script>
    
      

 

 

HTML代码

 

  
    

   
     
   
     <
   
     body
   
     >
   
     
 
   
     <
   
     div 
   
     id
   
     ="Drigging"
   
     >
   
     终于可以拖动啦,其实很简单
   
     </
   
     div
   
     >
   
     

   
     </
   
     body
   
     >
  
    

 

 

 目前不兼容火狐,请教高手,如何才能兼容火狐?