JQ鼠标拖动效果

<pre name="code" class="javascript"><pre name="code" class="javascript">$(document).ready(function() {
$(".show").mousedown(function(e){
//改变鼠标指针的形状
$(this).css("cursor","move");
<pre name="code" class="javascript"><span style="white-space:pre">	</span>//DIV在页面的位置

var offset = $(this).offset();

<span style="white-space:pre">	</span>//获得鼠标指针离DIV元素左边界的距离

var x = e.pageX - offset.left;

<span style="white-space:pre">	</span>//获得鼠标指针离DIV元素上边界的距离

var y = e.pageY - offset.top;

<span style="white-space:pre">	</span>//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件

$(document).bind("mousemove",function(ev) { $(".show").stop();

<span style="white-space:pre">	</span>//获得X轴方向移动的值

var _x = ev.pageX - x;

<span style="white-space:pre">	</span>//获得Y轴方向移动的值

var _y = ev.pageY - y; $(".show").animate({left:_x+"px",top:_y+"px"},10); }); }); $(document).mouseup(function() {
$(".show").css("cursor","default"); $(this).unbind("mousemove"); });})