HTML页面元素拖动

阳光穿透心脏的1/2处 2022-05-23 09:24 228阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            html {
                font-size: 100px;
            }
    
            .drag {
                position: absolute;
                top: 2rem;
                left: 2rem;
            }
    
            .Box {
                width: 0.5rem;
                height: 0.5rem;
                border: 1px solid black;
                background: #F7F5F5;
            }
        </style>
    </head>
    <body>
    
    <div class="Box drag a" style="font-size: 0.16rem;background-color: #56b0ff;">
    
    </div>
    
    <div class="Box drag b" style="font-size: 0.16rem;background-color: #beff59;">
    
    </div>
    
    
    </body>
    </html>
    
    <script src="jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    
        function move(className) {
            var isMove = false;
            var X, Y;
            var left, top;
    
            $("." + className).bind('mousedown', function (e) {
                isMove = true;
                X = e.pageX - parseInt($("." + className).css("left"));
                Y = e.pageY - parseInt($("." + className).css("top"));
            })
            $("." + className).bind('touchstart', function (e) {
                isMove = true;
                X = e.originalEvent.touches[0].clientX - parseInt($("." + className).css("left"));
                Y = e.originalEvent.touches[0].clientY - parseInt($("." + className).css("top"));
            })
    
            $(document).bind('mousemove', function (e) {
                if (isMove) {
                    left = e.pageX - X;
                    top = e.pageY - Y;
                    if (left < 0) {
                        left = 1
                    }
                    if (top < 0) {
                        top = 1
                    }
                    if (left > $(window).width() - $("." + className).width()) {
                        left = $(window).width() - $("." + className).width() - 2
                    }
                    if (top > $(window).height() - $("." + className).height()) {
                        top = $(window).height() - $("." + className).height() - 2
                    }
    
                    $("." + className).css({left: left, top: top});
    
                }
            })
            $(document).bind('touchmove', function (e) {
                if (isMove) {
                    left = e.originalEvent.touches[0].clientX - X;
                    top = e.originalEvent.touches[0].clientY - Y;
                    if (left < 0) {
                        left = 2
                    }
                    if (top < 0) {
                        top = 2
                    }
                    if (left > $(window).width() - $("." + className).width()) {
                        left = $(window).width() - $("." + className).width() - 2
                    }
                    if (top > $(window).height() - $("." + className).height()) {
                        top = $(window).height() - $("." + className).height() - 2
                    }
    
                    $("." + className).css({left: left, top: top});
    
                }
            })
    
            $(document).bind('mouseup', 'touchend', function (e) {
                isMove = false;
            })
    
        }
    
        move("a");
        move("b");
    </script>