可以拖动的DIV

最新推荐文章于 2024-07-17 09:19:35 发布

NNode

最新推荐文章于 2024-07-17 09:19:35 发布

阅读量452

点赞数

分类专栏： Web前端文章标签： HTML

本文链接：https://blog.csdn.net/Jesounao/article/details/52653141

版权

Web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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>