Perfect drag and playback

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");
    a1where= $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  to false ; 
        } 
        document.onmouseup =  function () {
             the this .onmousemove =  null ; 
            the console.log (positionArr); 
            P [ 0 ] .childNodes [ . 1 ] .innerHTML =  " flase " ; 
        } 
    } 
    
    A1 .onclick =  function () {
         // do not do not need to drag the playback 
        IF (positionArr.length >  0) {
             Var index =  0 ;
             // Previous slowly assignment from the coordinates of the locus generated when the drag 
            var Timer = the 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) { 
                    the clearInterval (Timer); 
                    // clear the original track 
                    positionArr.length =  0 ; 
                } 
            }, 10 ); 
        } 
    } 
    
</ Script >
(There are two options, but this is more concise, so send this to you Tell me. Today, a good mood, if necessary source code, you can give me a message)
Perfect drag and playback

Guess you like
