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")

效果