完美拖曳,效果如图所示

拖曳,点击a标签,可按刚才的轨迹原路返回

html

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>完美拖拽</title>
    <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>
    <script type="text/javascript">


    </script>
</head>

<body>
    <div id="box" style="margin-left: 0px; margin-top: 0px; left: 533px; top: 231px;">
        <h2 id="tz"><a href="javascript:;" id="a1">点击回放拖动轨迹</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>

</html>
<script src="common.js"></script>
<script>
    let $head = $('#tz');
    let $box = $('#box');
    let $a1 = $('#a1');
    let arr = [];
    let l,t;
    $head.onmousedown = function (e) {
        e = e || window.event;
        let x = e.offsetX;
        let y = e.offsetY;

        document.onmousemove = function (e) {
            e = e || window.event;
            l = e.pageX - x;
            t = e.pageY - y;
            //数组储存运动轨迹
            var obj = { left: l, top: t };
            arr.push(obj);
            console.log(obj, arr);


            $box.style.left = l + 'px';
            $box.style.top = t + 'px';
            //阻止冒泡
            return false;
        }
    }
    document.onmouseup = function () {
        document.onmousemove = null;
    }
    let index = 0;
    $a1.onmousedown = function () {
        $box.style.left = l + 'px';
        $box.style.top = t + 'px';
        if (arr.length > 0) {
            let timer = setInterval(function () {
                index ++;
                console.log(arr[arr.length - index].left,arr[arr.length - index].top)
                $box.style.left = arr[arr.length - index].left + 'px';
                $box.style.top = arr[arr.length - index].top + 'px';
                //清空上一次保存在数组里的轨迹
                if(index == arr.length){
                    clearInterval(timer);
                    data = [];
                    index = 0;
                }
            }, 20)
        }

    }
</script>

common.js

//  判断数组是否还有这个元素
function include(arr, item) {
    for(var i = 0; i < arr.length; i++) {
       if(arr[i] === item) {
           return true;
       } 
    }
    return false;
}
// 返回元素所在的位置
function indexOf(arr, item) {
    for(var i = 0; i < arr.length; i++) {
        if(arr[i] === item) {
            return i;
        } 
     }
     return -1;
}

// 任意区间随机整数
function getRandom(max, min) {
    min = min || 0;
    if(min > max) {
        var a = min;
        min = max;
        max = a;
    }
    return min + Math.floor(Math.random() * (max - min + 1));
}

// 数组去重
function noRepeat(arr) {
    var __arr = [];
    for(var i = 0; i < arr.length; i++) {
        // 存在返回true, 不存在返回false
        var bool = __arr.indexOf(arr[i])
        if(bool == -1) {
            __arr.push(arr[i]);
        }
    }
    return __arr;
}

function $(ele) {
    return document.querySelector(ele);
}
function $A(ele) {
    return document.querySelectorAll(ele);
}

function getRandomColor() {
    var str = '0123456789abcdef';
    var color = '#';
    for(var i = 0; i < 6; i++) {
        color += str[getRandom(str.length - 1)];
    }
    return color;
}

// 格式化url, 获取参数
function parseUrl(url) {
    var obj = {};
    url = url.split('?')[1].split('#')[0];
    url = url.split('&');
    url.forEach(function (x) {
        var arr = x.split('=');
        obj[arr[0]] = arr[1];
    })
    return obj;
}

// 获取非行内样式
function getStyle(ele, attr) {
    if(window.getComputedStyle) {
        return window.getComputedStyle(ele, null)[attr]
    }
    return ele.currentStyle[attr];
}

完美拖曳,拖拽沿轨迹回放

完美拖曳,效果如图所示

拖曳,点击a标签,可按刚才的轨迹原路返回

html

猜你喜欢