完美拖拽及回放

2019-08-09
21:54:40
<!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>
</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="../public.js"></script>
<script>
    
    var tz = $id("tz");
    var a1 = $id("a1");
    var box = $id("box");
    var p = document.getElementsByTagName("p")
     
    var positionArr = [];
    
    tz.onmousedown = function(eve){
        var e = eve || event;
        var x = e.offsetX;
        var y = e.offsetY;
        p[0].childNodes[1].innerHTML = "ture"
        document.onmousemove = function(eve){
            var e = eve || event;
            var l = e.clientX - x;
            var t = e.clientY - y;
            
            //保存轨迹 
            positionArr.push({left:l,top:t});
            
            box.style.left = l + "px";
            box.style.top = t + "px";
            return false;
        }
        document.onmouseup = function(){
            this.onmousemove = null;
            console.log(positionArr);
            p[0].childNodes[1].innerHTML = "flase";
        }
    }
    
    a1.onclick = function(){
        //没有拖拽就不需要回放
        if(positionArr.length > 0){
            var index = 0;
            //根据拖拽时产生的坐标轨迹从后往前慢慢赋值
            var timer = setInterval(function(){
                index++;
                box.style.left = positionArr[positionArr.length-index].left + "px";
                box.style.top = positionArr[positionArr.length-index].top + "px";
                if(index == positionArr.length){
                    clearInterval(timer);
                    //清除原来的轨迹 
                    positionArr.length = 0;
                }
            },10);
        }
    }
    
</script>
（有两个方案，不过这个更简洁，所以发这个给各位看官。今日心情不佳，如有需要源代码，可以给我留言）
猜你喜欢
