jQuery拖曳div、移動div、彈出層實作原理及範例_jquery

程式碼示範：

http://www.imqing.com/demo/movediv.html

大概原理：

使div的position為絕對定位absolute，然後控制其top與left值，需監聽滑鼠事件，主要用到mousedown, mousemove, mouseup。

在mousedown後，記錄mousedown時滑鼠與需要移動的div的位置，然後取得兩者之差，得到在滑鼠移動後，div的位置。即：

left = 當前滑鼠位置.x - (滑鼠點擊時的.x值- div的初始位置x值)
top = 當前滑鼠位置.y - (滑鼠點擊時的.y值- div的初始位置y值)

代碼：

複製代碼 代碼如下:

代碼如下:



代碼如下:

按住此處移動當前div

這裡是其它內容

ALL Rights Reserved Qing 版權所有

<script> <BR>jQuery(document).ready( <BR>function () { <BR>$('#banner').mousedown( <BR>function (event) { <BR>var isMove = true; <BR>var abs_x = event.pageX - $('div.moveBar').offset().left; <BR>var abs_y = event.pageY - $('div.moveBar'). offset().top; <BR>$(document).mousemove(function (event) { <BR>if (isMove) { <BR>var obj = $('div.moveBar'); <BR>obj.css ({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); <BR>} <BR>} <BR>).mouseup( <BR>function () { <BR>isMove = false; <BR>} <BR>); <BR>} <BR>); <BR>} </script>

);
其實程式碼量也不多的，嘿嘿。重點就是需要移動的div的position是絕對定位，然後偵測滑鼠事件就行了。嘿嘿。