div拖动

最新推荐文章于 2024-07-08 16:22:29 发布

weixin_30412013

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量33

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/-llf/p/10450863.html

版权

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Qing's Web</title>
    <script src="/js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <style type="text/css">

        .moveBar {
            position: absolute;
            width: 250px;
            height: 300px;
            background: #666;
            border: solid 1px #000;
            margin: 50px;
            left:200px;
            top:200px;
        }

        #banner {
            background: #52CCCC;
            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) {

                    $(".moveBar").css("margin","0px")

                    var isMove = true;
                    var abs_x = event.pageX - ($('div.moveBar').offset().left+50);
                    var abs_y = event.pageY - ($('div.moveBar').offset().top+50);
                    $(document).mousemove(function(event) {
                        if(isMove) {
                            var obj = $('.moveBar');
                            obj.css({
                                'left': event.pageX - abs_x,
                                'top': event.pageY - abs_y
                            });
                        }
                    }).mouseup(
                        function() {
                            var obj = $('.moveBar');
                            //还原样式，并获取
                            obj.css({
                                'left': $('div.moveBar').offset().left-50,
                                'top': $('div.moveBar').offset().top-50
                            });
                            $(".moveBar").css("margin-left","50px")
                            $(".moveBar").css("margin-top","50px")

                            isMove = false;
                        }
                    );
                }
            );
        }
    );
</script>
</body>
</html>

转载于:https://www.cnblogs.com/-llf/p/10450863.html

weixin_30412013

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div拖动

<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Qing's Web</title&...
复制链接

扫一扫

div拖动

“相关推荐”对你有帮助么？