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來判斷執行相應的函數。造成鼠標















