<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><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br><title>拖动DIV</title> <br><style type="text/css"> <BR>.show{ <BR>background:#7cd2f8; <BR>width:100px; <BR>height:100px; <BR>text-align:center; <BR>position:absolute; <BR>z-index:1; <BR>left:100px; <BR>top:100px; <BR>} <br><br></style> <br><script type="text/javascript" src="../Script/jquery-1.7.2.js"></script> <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><br>$(document).mouseup(function() <BR>{ <BR>$(".show").css("cursor","default"); <BR>$(this).unbind("mousemove"); <BR>}) <BR>}) <br><br>// --></script> <br> <br> <br><div class="show"> <br>jquery实现DIV层拖动 <br> </div> <br> <br> <br> </div>
