jQuery实现Div控件拖动效果

html

<div id="drop">
jquery实现DIV层拖动
</div>

css

<pre name="code" class="html">#show{
background:#00bcd4;
width:100px;
height:100px;
text-align:center;
position:absolute;
z-index:1;
left:100px;
top:100px;
}

js

jQuery.fn.moveDivByID= function (id) {
$("#"+id).mousedown(function(e){
$(this).css("cursor","move");
var offset= $(this).offset();
console.log("c");
var x= e.pageX-offset.left;
var y= e.pageY-offset.top;

$(document).bind("mousemove",function(ev){
$("#"+id).stop();
var _x= ev.pageX-x;
var _y= ev.pageY-y;
$("#"+id).animate({left:_x+"px",top:_y+"px"},10);
});
});

$(document).mouseup(function()
{
$("#"+id).css("cursor","default");
$(this).unbind("mousemove");
});
};

用法

$().moveDivByID("drop")

效果