完美拖拽-JavaScript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 完美拖拽-JavaScript </title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                height: 100vh;
            }
            #box{
                width: 150px;
                height: 150px;
                background: blueviolet;
                position: absolute;
                top: 200px;
                left: 200px;
            }
            #box span{
                float: right;
                line-height: 20px;
                display: block;
                width: 40px;
                text-align: center;
                background: greenyellow;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <span id="back">回放</span>
        </div>
        <script type="text/javascript">
            function $(id){
                return document.getElementById(id);
            };
            var arrX = [];
            var arrY = [];
            $("box").onmousedown = function(ev){
                var ev = ev || window.event;
                // 获取鼠标按下时的坐标
                var reX = ev.offsetX || ev.layerX;
                var reY = ev.offsetY || ev.layerY;
                document.onmousemove = function(ev){
                    var ev = ev || window.event;
                    $("box").style.top = ev.pageY - reY + 'px';
                    $("box").style.left = ev.pageX - reX + 'px';
                    // 控制移动范围
                    if( $("box").offsetTop <= 0 ){
                        $("box").style.top = 0;
                    }else if( $("box").offsetTop >= document.body.offsetHeight - $("box").offsetHeight ){
                        $("box").style.top = document.body.offsetHeight - $("box").offsetHeight + 'px';
                    };
                    if( $("box").offsetLeft <= 0 ){
                        $("box").style.left = 0;
                    }else if( $("box").offsetLeft >= document.body.offsetWidth - $("box").offsetWidth ){
                        $("box").style.left = document.body.offsetWidth - $("box").offsetWidth + 'px';
                    };
                    arrY.push( $('box').offsetTop );
                    arrX.push( $('box').offsetLeft );
                    console.log(arrY);
                };
            };
            document.onmouseup = function(){
                document.onmousemove = null;
            };
            $("back").onclick = function(){
                var timer = null;
                var index = arrX.length - 1;
                timer = setInterval(function(){
                    $("box").style.top = arrY[index--] + 'px';
                    $("box").style.left = arrX[index--] + 'px';
                    if( index<=0 ){
                        clearInterval(timer);
                        arrX = [];
                        arrY= [];
                    }
                },50);
            };
            $("back").onmousedown = function(ev){
                ev.stopPropagation();
            };
            
        </script>
    </body>
</html>
完美拖拽-JavaScript

推荐阅读更多精彩内容
