jQuery控制Div拖拽效果完整實例分析

更新時間：2015年04月15日 09:55:07 作者：songguo

這篇文章主要介紹了jQuery控制Div拖拽效果完整實例,對jQuery控制拖拽效果的方法以注釋形式給予了較為詳細的介紹,便于讀者理解代碼含義,需要的朋友可以參考下

本文實例講述了jQuery控制Div拖拽效果的方法。分享給大家供大家參考。具體如下：

<!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>無標題文檔</title>
<style>
#Drigging {
width:200px;
background:#CCC;
border:solid 1px #666;
height:80px;
line-height:80px;
text-align:center;
position:absolute;
}
</style>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ 
var bool=false; //標識是否移動元素
var offsetX=0; //聲明DIV在當前窗口的Left值
var offsetY=0; //聲明DIV在當前窗口的Top值
$("#Drigging").mouseover(function(){
$(this).css('cursor','move');
//當鼠標移動到拖拽的DIV上的時候，將鼠標的樣式設置為移動(move)
})
$("#Drigging").mousedown(function(){ 
 bool=true;
 //當鼠標在移動元素按下的時候?qū)ool設定為true
 offsetX = event.offsetX;
 //獲取鼠標在當前窗口的相對偏移位置的Left值并賦值給offsetX
  offsetY = event.offsetY;
  //獲取鼠在當前窗口的相對偏移位置的Top值并賦值給offsetY
 $(this).css('cursor','move');
 }).mouseup(function(){
bool=false;
//當鼠標在移動元素起來的時候?qū)ool設定為false
})
$(document).mousemove(function(){
if(!bool)//如果bool為false則返回
return;
//當bool為true的時候執(zhí)行下面的代碼
var x = event.clientX-offsetX;
//event.clientX得到鼠標相對于客戶端正文區(qū)域的偏移
//然后減去offsetX即得到當前推拽元素相對于當前窗口的X值
//（減去鼠標剛開始拖動的時候在當前窗口的偏移X）
var y = event.clientY-offsetY;
//event.clientY得到鼠標相對于客戶端正文區(qū)域的偏移
//然后減去offsetX即得到當前推拽元素相對于當前窗口的Y值
//（減去鼠標剛開始拖動的時候在當前窗口的偏移Y）
$("#Drigging").css("left", x);
$("#Drigging").css("top", y);
$("#Drigging").css('cursor','move');
})
})
</script>
  </head>
  <body>
    <div id="Drigging" style="float:left">
      拖拽層
    </div>
  </body>
</html>

希望本文所述對大家的jQuery程序設計有所幫助。

您可能感興趣的文章: