NN's Note   # 不会前端啊喂 !!
当前位置:NN's Note » Movable Div
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Movable Div</title>
    <script src="./jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
    .moveBar {
        position: absolute;
        width: 250px;
        height: 300px;
        background: #eee;
        border: solid 1px #000;
    }
    
    #banner {
        background: #65cdff;
        cursor: move;
    }
    </style>
</head>

<body>
    <div class="moveBar">
        <div id="banner">按住此处移动当前div</div>
        <div class="content">这里是其它内容</div>
    </div>
    <script>
    jQuery(document).ready(function() {
        $('#banner').mousedown(function(event) {
            var isMove = true;
            var abs_x = event.pageX - $('div.moveBar').offset().left;
            var abs_y = event.pageY - $('div.moveBar').offset().top;
            $(document).mousemove(function(event) {
                if (isMove) {
                    var obj = $('div.moveBar');
                    obj.css({
                        'left': event.pageX - abs_x,
                        'top': event.pageY - abs_y
                    });
                }
            }).mouseup(function() {
                isMove = false;
            });
        });
    });
    </script>
</body>

</html>

-----------------------------------------------------
“欲将心事付瑶琴,知音少,弦断有谁听。” ——摘自 岳武穆《小重山》...

添加新评论 »

Markdown