完美拖拽及回放

Posted g-code

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了完美拖拽及回放相关的知识，希望对你有一定的参考价值。

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>

（有两个方案，不过这个更简洁，所以发这个给各位看官。今日心情不佳，如有需要源代码，可以给我留言）

 

以上是关于完美拖拽及回放的主要内容，如果未能解决你的问题，请参考以下文章

事件拖拽回放事件

H5拖拽 构造拖拽及缩放 pdf展示

Element,el-dialog弹出层拖拽及拉伸、双击全屏

VIPERFX完美音质设置方法？

Vue中使用mapBox完成轨迹回放

百度地图上如何实现轨迹回放