jQuery实践之拖动Div

　　使用jQuery实现拖动DIV十分方便，只需寥寥几行代码即可。

<script src="../script/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">    
    var bool = false;
    var offsetX = 0;
    var offsetY = 0;
    $('document').ready(function() {
        $("#DragTitle").mousedown(function(event) {
            bool = true;
            offsetX = event.offsetX ? event.offsetX : event.layerX;
            offsetY = event.offsetY ? event.offsetY : event.layerY;
            $("#DragTitle").css('cursor', 'move');
        })
        .mouseup(function() {
            bool = false;
        })
        $(document).mousemove(function(event) {
            if (!bool) {
                return;
            }
            else {
                var x = event.clientX - offsetX;
                var y = event.clientY - offsetY;
                $("#DragBody").css("position", "absolute");
                $("#DragBody").css("left", x);
                $("#DragBody").css("top", y);
            }
        })
    });
</script>

　　

<div id="DragBody" style="300px; height:200px; ">
        <div id="DragTitle" style="height:20px; background-color: #0066FF;">
            Title
        </div>
        <div id="DragContainer" style="height:180px; background-color: #99CCFF;">
            内容
        </div>
    </div>