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 >

 

 

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

 

转载于:https://www.cnblogs.com/zhit/archive/2010/04/25/1719863.html