DOM-demo:拖拽盒子移动盒子

最新推荐文章于 2023-07-19 18:01:33 发布

Youser511

最新推荐文章于 2023-07-19 18:01:33 发布

阅读量148

点赞数

分类专栏：学习文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_45025670/article/details/125820023

版权

学习专栏收录该内容

92 篇文章 1 订阅

订阅专栏

demo要求：

在这里插入图片描述
比较有难度，仔细看
思路与逻辑：

          1:事件源  只能按下title
            通过disX，disY  记录鼠标的相对坐标
          2:实现拖拽   document.onmousemove
            var left = e.pageX - disX
            var top = e.pageY - disy
          3:设置别界
            left <= 0   left = 0
          最大边界   = 页面的可视宽度 - 盒子的实际宽度
            left >= html.clientWidth - oBox.offsetWidth

            top <= 0   top = 0
          最大边界   = 页面的可视Height - 盒子的实际Height
            top >= html.clientHeight - oBox.offsetHeight

            oBox.style.left = left
            oBox.style.top = top

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box{
      width: 400px;
      height: 400px;
      background-color: aquamarine;
      position: absolute;
      left: 0;
      top: 0;
    }
    #title{
      width: 100%;
      height: 50px;
      background-color: #000;
      position: absolute;
      left: 0;
      top: 0;
    }
    span{
      position: absolute;
      right: 0;
      top: 0;
      width: 50px;
      height: 50px;
      color: white;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="title">
      <span>
        返回
      </span>
    </div>
  </div>
  <script>
  // 1获取元素

   var oBox = document.getElementById('box');
   var oSpan = document.getElementsByTagName('span')[0];
   var html = document.documentElement

// 初始化变量
   var arr = [];  //存储盒子的位置
   var timer = null;
  //  2实现拖拽
  oBox.onmousedown = function(evt){
    var e = evt || window.event;
    // 事件源
    var target = e.target || e.srcElement
    if(target.id === 'title'){
      // console.log(123)
      // 记录盒子的初始位置
      arr.push({left:oBox.offsetLeft,top:oBox.offsetTop})
       var disX = e.offsetX;
       var disY = e.offsetY;
      //  移动
      document.onmousemove = function(evt){
        var e = evt || window.event;
        var left = e.pageX - disX;
        var top = e.pageY - disY;
        // 设置边界   html.clientWidth页面可视区域的宽度
        if(left <= 0){
          left = 0;
        }else if(left >= html.clientWidth - oBox.offsetWidth){
          left = html.clientWidth - oBox.offsetWidth
        }

        if(top <= 0){
          top = 0;
        }else if(top >= html.clientHeight - oBox.offsetHeight){
          top = html.clientHeight - oBox.offsetHeight
        }


        oBox.style.left = left + 'px';
        oBox.style.top = top + 'px';
        // 记录盒子所有的运动轨迹
        arr.push({left:oBox.offsetLeft,top:oBox.offsetTop});
        
      }
      document.onmouseup = function(){
        // 清除移动事件
        document.onmousemove = null
        console.log(arr)
      }
    }
  }


  // 点击返回  盒子回到原始位置
  oSpan.onclick = function(){
    // 清空所有的定时器
     clearInterval(timer);
    //  index时存放盒子运动轨迹的 数组的最后一个值的下标
     var index = arr.length - 1;
     timer = setInterval(function(){
       oBox.style.left = arr[index].left + 'px';
       oBox.style.top = arr[index --].top + 'px';
      //  index --

       if(index === -1){
         clearInterval(timer);
         arr = []
       }

     },50)
  }
  
  </script>
</body>
</html>