<div class="codetitle"> <span><a style="CURSOR: pointer" data="44123" class="copybut" id="copybut44123" onclick="doCopy('code44123')"><u>複製程式碼</u></a></span>程式碼如下:</div> <div class="codebody" id="code44123"> <br>pageEncoding="utf-8"%> <br> <br> <br> <br>> <br>拖曳DIV標題> <br> <br>.show{ <br>背景:#7cd2f8; <br>寬度:100px; <br> 高度:100px; <br>文字對齊:居中; <br>位置:絕對; <br>z- index:1; <br>左:100px; <br>上:100px; <br>} <br><br>樣式> <br> <br><script type="text/javascript"><!-- <BR>$(document).ready(function() <BR>{ <BR>$(".show").mousedown( function(e)//e事件滑鼠<BR>{ <BR>$(this).css("cursor","move");//改變滑鼠指標的形狀<br><br>var offset = $( this).offset();//DIV在頁面的位置<BR>var x = e.pageX - offset.left;//取得滑鼠指標離DIV元素左邊界的距離<BR>var y = e.pageY - offset.top;//取得滑鼠指標離開DIV元素上邊界的距離<BR>$(document).bind("mousemove",function(ev)//綁定滑鼠的移動事件,因為屋頂在DIV元素北方也震擊效果,所以要用doucment的事件,而不是用DIV元素的事件<BR>{ <BR>$(".show").stop();/ /加上這個之後<br><br>var _x = ev.pageX - x;//取得X軸方向移動的值<BR>var _y = ev.pageY - y;//取得Y軸方向移動的值<br><br>$(".show") .animate({left:_x "px",top:_y "px"},10); <BR><br>}); <br><br> $(文檔).mouseup( function() <br>{ <BR>$(".show").css("cursor","default"); <BR>$(this).unbind("mousemove") <BR>}); 🎜>}) <BR><BR>// --></script> <br>頭> <br> <br><div class="show"> <br>jquery實現DIV層拖曳<br> </div> <br>身體> <br> <br><br> </div>