jquery经典实例之拖动面板-蒲公英云

jquery经典实例之拖动面板

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="GBK">
    <title></title>
</head>
<body>
    <div style="position: absolute;border: 1px solid yellow;width: 500px;">
        <div id="title" style="background-color:powderblue;height: 30px;">
            <strong>标题</strong>
        </div>
        <div style="height: 300px;">
            内容
        </div>
    </div>
    <script src="jquery-1.5.1.js"></script>
<script>
    $(function () {
        $('#title').mouseover(function () {
            $(this).css('cursor','move');
        }).mousedown(function (e) {
            var _event = e || widows.event;
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;
            var parent_left = $(this).parent().offset().left;
               var parent_top = $(this).parent().offset().top;
            $(this).bind('mousemove',function (e) {
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;
                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);
                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');
            })
        }).mouseup(function () {
            $(this).unbind('mousemove');
        });
    })
</script>
</body>
</html>