HTML页面元素拖动

<!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>
猜你喜欢
