自制完美拖拽

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>拖拽回放</title>
      <style>
            *{
                  margin: 0;padding: 0;
            }
            #box{
                  width: 400px;
                  height: 300px;
                  background: #000;
                  box-shadow: 0 0 10px #000;
                  position: absolute;
            }
            #drag-bar{
                  height: 30px;
                  width: 400px;
                  background: antiquewhite;
                  text-align: right;
            }
            #btn{
                  width: 60px;
                  height: 30px;
                  background: yellowgreen;
                  box-sizing: border-box;
            }
      </style>
</head>
<body>
      <div id="box">
            <div id="drag-bar"><button id="btn">回放</button></div>
            
           
      </div>      
      
      <script>
            var box = document.getElementById("box");
            var dragBar = document.getElementById("drag-bar");
            var btn = document.getElementById("btn");

            var offsetX = 0, offsetY = 0 , positionArray = [];
            // 开始拖拽;
            dragBar.addEventListener("mousedown",handlerMouseDown)
            function handlerMouseDown(evt){


                  var e = evt || window.event;
                  var target = e.target || e.srcElement;
                  if(target.nodeName === "BUTTON"){
                        return false;
                  }

                  offsetX = e.offsetX;
                  offsetY = e.offsetY;
                  document.addEventListener("mousemove",handlerMouseMove)
            }
            function handlerMouseMove(evt){
                  var e = evt || window.event;
                  var _left =  e.clientX - offsetX ;
                  var _top = e.clientY - offsetY;
                  box.style.left = _left + "px";
                  box.style.top = _top + "px";

                  // console.log({left:_left , top : _top});
                  positionArray.push(
                        {
                              left: _left ,
                              top : _top
                        }
                   )
            }     
            document.addEventListener("mouseup",handlerMouseUp);

            function handlerMouseUp(){
                  document.removeEventListener("mousemove",handlerMouseMove)
            }
            
            btn.addEventListener("click",handlerClick)
            function handlerClick(){
                  // 1. 找到一个慢慢来的下标;
                  var index = positionArray.length;
                  // 2. 慢慢的递减;
                  var timer = setInterval(function(){
                        if(index === 0){
                              positionArray.length = 0;
                              return clearInterval(timer);
                        }
                        index --
                        box.style.left = positionArray[index].left + "px";
                        box.style.top = positionArray[index].top + "px";
                  },100)
            }
猜你喜欢
