程式碼示範:
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值)
代碼:
代碼如下:
代碼如下:
Qing's Web 按住此處移動當前div
這裡是其它內容
<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是絕對定位,然後偵測滑鼠事件就行了。嘿嘿。