完美拖拽-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;
                // 獲取鼠標(biāo)按下時(shí)的坐標(biāo)
                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';
                    // 控制移動(dòng)范圍
                    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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容