jQuerydiv元素拖動效果代碼實例
本章節分享一段代碼實例，它實現了元素的拖動效果。
代碼非常的簡單，有這方面需求的朋友可以做一下參考。
代碼實例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
var bool=false;
var offsetX=0;
var offsetY=0;
$("#Drigging").mouseover(function(){
$(this).css('cursor','move');
})
$("#Drigging").mousedown(function(event){
bool=true;
offsetX = event.offsetX;
offsetY = event.offsetY;
$(this).css('cursor','move');
}).mouseup(function(){
bool=false;
})
$(document).mousemove(function(event){
if(!bool)
return;
var x = event.clientX-offsetX;
var y = event.clientY-offsetY;
$("#Drigging").css("left", x);
$("#Drigging").css("top", y);
$("#Drigging").css('cursor','move');
})
})
</script>
</head>
<body>
<div id="Drigging" style="float:left"></div>
</body>
</html>上面的代碼實現了我們的要求，下面介紹一下它的實現過程。
一.代碼注釋:
（1）.$(function(){})，當文檔結構完全加載完畢再去執行函數中的代碼。
（2）.var bool=false，設置一個標識符，用來說明元素是否可以拖動。
（3）.var offsetX=0，聲明一個變量并賦值為0，用法后面介紹。
（4）.var offsetY=0，同上。
（5）.$("#Drigging").mouseover(function(){
$(this).css('cursor','move');
})，為元素注冊mouseover事件處理函數，當鼠標懸浮的時候鼠標指針編程帶有四個箭頭的那種形狀。
（6）.$("#Drigging").mousedown(function(){
bool=true;
offsetX = event.offsetX;
offsetY = event.offsetY;
$(this).css('cursor','move');
})，為元素注冊mousedown事件處理函數，也就是當鼠標在元素中按下的時候觸發。
bool=true，將bool的值設置為true，也就是元素可以拖動。
（7）.offsetX = event.offsetX，獲取事件觸發時候鼠標指針在元素中的橫坐標。
（8）.offsetY = event.offsetY，和上面同理，獲取縱向坐標。
（9）.$(this).css('cursor','move')，設置鼠標指針為帶有四個箭頭的那種形狀。
（10）..mouseup(function(){
bool=false;
})，注冊mouseup事件處理函數，也就是當鼠標案件松開的時候，將bool設置為false，也就是不可拖動。
（11）.$(document).mousemove(function(){})，為document對象注冊mousemove事件處理函數。
（12）.if(!bool) return，如果bool為false，那么直接跳出函數，也就是不可以拖動。
（13）.var x = event.clientX-offsetX，獲取元素左邊緣距離瀏覽器客戶區左邊緣的尺寸。
（14）.var y = event.clientY-offsetY,后去元素上邊緣距離瀏覽器客戶區上邊緣的尺寸。
（15）.$("#Drigging").css("left", x);
$("#Drigging").css("top", y);
$("#Drigging").css('cursor','move');
設置相關的樣式，因為是絕對定位，所以就實現了拖動效果。
（1）.mouseover事件可以參閱jQuery mouseover 事件一章節。
（2）.css()方法可以參閱jQuery css()一章節。
（3）.mousedown事件可以參閱jQuery mousedown 事件一章節。
（4）.mouseup事件可以參閱jQuery mouseup 事件一章節。
（5）.mousemove事件可以參閱jQuery mousemove 事件一章節。
（6）.clientX可以參閱javascript clientX一章節。
（7）.offsetX屬性可以參閱javascript offsetX一章節。
相關推薦
-
jQuery獲取所有的checkbox復選框元素
本章節分享一段實例代碼，它可以實現獲取指定元素素有的復選框元素。代碼實例如下
-
jquery獲取指定類型子元素代碼實例
本章節介紹一下如何獲取指定類型的子元素，下面就通過代碼實例做一下演示。代碼實例如下:m
-
獲取元素在頁面中的坐標位置代碼實例
本章節分享一段代碼實例，它實現了獲取指定元素在頁面匯總坐標的功能。代碼實例如下
-
jQuery如何創建一個新的元素對象
使用jQury創建一個新元素對象非常的簡單，下面就是一個非常簡單的方式。代碼如下:vr $div=$(本站的url地址是實例3)當然生成的也是一個jQury對象，
-
jquery實現的右鍵鼠標點擊事件
jqury其實本身的事件機制就很完善了，包括了單擊，雙擊，鼠標移入，鼠標移出等。但是卻少了一個做事件。就是鼠標右擊事件。當然大家也是直接用偵聽鼠標按下事件，然后通過if來判斷執行相應的函數。造成鼠標
