2022-05-11 实现一个可按原路径返回的拖拽_文件移动后怎么原路径返回-CSDN博客

本文链接：https://blog.csdn.net/rowlet/article/details/124721063

要求

鼠标拖拽完成后,点击a标签可以实现原先的拖拽路径并回访

思路

先实现一个拖拽,把拖拽过程中鼠标移动产生的一个个坐标添加到数组中,在a标签的点击事件中设置一个定时器,遍历数组中的坐标赋给拖拽div

完整代码(样式不看)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style type="text/css">
        html,
        body {
            overflow: hidden;
        }
        
        body,
        div,
        h2,
        p {
            margin: 0;
            padding: 0;
        }
        
        body {
            color: #fff;
            background: #000;
            font: 12px/2 Arial;
        }
        
        p {
            padding: 0 10px;
            margin-top: 10px;
        }
        
        span {
            color: #ff0;
            padding-left: 5px;
        }
        
        #box {
            position: absolute;
            width: 300px;
            height: 150px;
            background: #333;
            border: 2px solid #ccc;
            top: 50%;
            left: 50%;
            margin: -75px 0 0 -150px;
        }
        
        #box h2 {
            height: 25px;
            cursor: move;
            background: #222;
            border-bottom: 2px solid #ccc;
            text-align: right;
            padding: 0 10px;
        }
        
        #box h2 a {
            color: #fff;
            font: 12px/25px Arial;
            text-decoration: none;
            outline: none;
        }
    </style>
    <div id="box" style="margin-left: 0px; margin-top: 0px; left: 533px; top: 231px;">
        <h2>
            <a href="javascript:;">点击回放拖动轨迹</a>
        </h2>
        <p>
            <strong>Drag:</strong>
            <span>false</span>
        </p>
        <p>
            <strong>offsetTop:</strong>
            <span>231</span>
        </p>
        <p>
            <strong>offsetLeft:</strong>
            <span>533</span>
        </p>
    </div>
</body>
<script>
    // 1.获取标签节点
    var boxObj = document.querySelector("#box");
    var aObj = document.querySelector("a");
    //定义一个数组用于存放坐标
    var posArr = [];
    // 2.设置一个拖拽
    // 2.1.鼠标按下事件
    boxObj.onmousedown = function(eveDown) {
        //每次鼠标按下数组都先清空
        posArr = [];
        // 2.2.鼠标移动事件
        document.onmousemove = function(eveMove) {
            var l = eveMove.clientX - eveDown.offsetX,
                t = eveMove.clientY - eveDown.offsetY;
            boxObj.style.left = l + 'px';
            boxObj.style.top = t + 'px';
            //把通过[鼠标移动]新增的每一组坐标push到数组posArr中
            posArr.push({ //二维数组
                left: l,
                top: t
            });
        };
    };
    // 2.3.鼠标抬起事件
    document.onmouseup = function() {
        document.onmousemove = null;
    };
    // 3.点击a标签文字实现拖拽回访
    aObj.onclick = function(eve) {
        // 点击后开启一个定时器times,遍历每一对数组坐标,实现回访
        var index = posArr.length - 1;
        var times = setInterval(function() {
            var posObj = posArr[index];
            //把数组坐标设置给boxObj
            boxObj.style.left = posObj.left + 'px';
            boxObj.style.top = posObj.top + 'px';
            index--; //通过index自减实现遍历效果
            if (index == -1) clearInterval(times); //遍历结束时,停止定时器
        }, 30);
    };
    //阻止a标签所有父级元素同一事件的冒泡
    aObj.onmousedown = function(eve) {
        eve.stopPropagation();
    }
</script>

</html>

重点代码

    // 1.获取标签节点
    var boxObj = document.querySelector("#box");
    var aObj = document.querySelector("a");
    //定义一个数组用于存放坐标
    var posArr = [];
    // 2.设置一个拖拽
    // 2.1.鼠标按下事件
    boxObj.onmousedown = function(eveDown) {
        //每次鼠标按下数组都先清空
        posArr = [];
        // 2.2.鼠标移动事件
        document.onmousemove = function(eveMove) {
            var l = eveMove.clientX - eveDown.offsetX,
                t = eveMove.clientY - eveDown.offsetY;
            boxObj.style.left = l + 'px';
            boxObj.style.top = t + 'px';
            //把通过[鼠标移动]新增的每一组坐标push到数组posArr中
            posArr.push({ //二维数组
                left: l,
                top: t
            });
        };
    };
    // 2.3.鼠标抬起事件
    document.onmouseup = function() {
        document.onmousemove = null;
    };
    // 3.点击a标签文字实现拖拽回访
    aObj.onclick = function(eve) {
        // 点击后开启一个定时器times,遍历每一对数组坐标,实现回访
        var index = posArr.length - 1;
        var times = setInterval(function() {
            var posObj = posArr[index];
            //把数组坐标设置给boxObj
            boxObj.style.left = posObj.left + 'px';
            boxObj.style.top = posObj.top + 'px';
            index--; //通过index自减实现遍历效果
            if (index == -1) clearInterval(times); //遍历结束时,停止定时器
        }, 30);
    };
    //阻止a标签所有父级元素同一事件的冒泡
    aObj.onmousedown = function(eve) {
        eve.stopPropagation();
    }