本文實例講述了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; //當鼠標在移動元素按下的時候將bool設定為true offsetX = event.offsetX; //獲取鼠標在當前窗口的相對偏移位置的Left值并賦值給offsetX offsetY = event.offsetY; //獲取鼠在當前窗口的相對偏移位置的Top值并賦值給offsetY $(this).css('cursor','move'); }).mouseup(function(){bool=false;//當鼠標在移動元素起來的時候將bool設定為false})$(document).mousemove(function(){if(!bool)//如果bool為false則返回return;//當bool為true的時候執行下面的代碼var x = event.clientX-offsetX;//event.clientX得到鼠標相對于客戶端正文區域的偏移//然后減去offsetX即得到當前推拽元素相對于當前窗口的X值//（減去鼠標剛開始拖動的時候在當前窗口的偏移X）var y = event.clientY-offsetY;//event.clientY得到鼠標相對于客戶端正文區域的偏移//然后減去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程序設計有所幫助。
新聞熱點
疑難解答
