拖拽回放

<textarea name="" id="con" cols="30" rows="30"></textarea>
    <button id="btn">恢复</button>
    <div id="box"></div>
    <script>
        var con=document.getElementById('con');    
        var btn=document.getElementById('btn');    
        var box=document.getElementById('box');
        var arr=[];
        box.onmousedown=function(ev){
            var e=ev||window.event;
            var x=e.clientX-box.offsetLeft;
            var y=e.clientY-box.offsetTop;
            document.onmousemove=function(ev){
                var e=ev||window.event;
                var l=e.clientX-x;
                var t=e.clientY-y;
                con.innerHTML+='left:'+l+',top:'+t+'
';
                box.style.left=l+'px';
                box.style.top=t+'px';
                arr.push({'left':l,'top':t});

            }
            document.onmouseup=function(){
                document.onmousemove=null;
            }
            btn.onclick=function(){
                var timer=setInterval(function(){
                    var p=arr.pop();
                    if (arr.length<=0) {
                        clearInterval(timer);
                    }else{
                        box.style.left=p.left+'px';
                        box.style.top=p.top+'px';
                    }

                },10);
            }
        }    
    </script>