可以拖动的DIV

来源：互联网发布：windows路由表命令查看编辑：程序博客网时间：2024/05/01 22:07
<!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>
0 0