js 实现div拖拽

最新推荐文章于 2024-07-17 09:19:35 发布

姜天生i

最新推荐文章于 2024-07-17 09:19:35 发布

阅读量183

点赞数

分类专栏： JavaScript 文章标签： html js

本文链接：https://blog.csdn.net/qq_37041819/article/details/103476026

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .box {
      position: absolute;
      width: 200px;
      height: 200px;
      background: red;
    }
    .box span{
      position: absolute;
      display: inline-block;
      width:20px;
      height:20px;
      right: 5px;
      color: #fff;
      font-size: 32px;
      cursor: pointer;
    }
  </style>
</head>

<body>
<div class="box">
   <span class="close">X</span>
</div>
<script>
  var box = document.getElementsByClassName("box")[0]; //获取元素
  var close = document.getElementsByClassName("close")[0]; //获取元素
  var x, y; //鼠标相对与div左边，上边的偏移
  var isDrop = false; //移动状态的判断鼠标按下才能移动
  box.onmousedown = function(e) {
    var e = e || window.event; //要用event这个对象来获取鼠标的位置
    x = e.clientX - box.offsetLeft;
    y = e.clientY - box.offsetTop;
    isDrop = true; //设为true表示可以移动
  }

  document.onmousemove = function(e) {
    //是否为可移动状态                　　　　　　　　　　　 　　　　　　　
    if(isDrop) {
      var e = e || window.event;
      var moveX = e.clientX - x; //得到距离左边移动距离                    　　
      var moveY = e.clientY - y; //得到距离上边移动距离
      //可移动最大距离
      var maxX = document.documentElement.clientWidth - box.offsetWidth;
      var maxY = document.documentElement.clientHeight - box.offsetHeight;

      //范围限定  当移动的距离最小时取最大  移动的距离最大时取最小
      //范围限定方法一
      /*if(moveX < 0) {
          moveX = 0
      } else if(moveX > maxX) {
          moveX = maxX;
      }

      if(moveY < 0) {
          moveY = 0;
      } else if(moveY > maxY) {
          moveY = maxY;
      }　*/
      //范围限定方法二　
      moveX=Math.min(maxX, Math.max(0,moveX));

      moveY=Math.min(maxY, Math.max(0,moveY));
      box.style.left = moveX + "px";
      box.style.top = moveY + "px";
    } else {
      return;
    }

  }

  document.onmouseup = function() {
    isDrop = false; //设置为false不可移动
  }
</script>
</body>

</html>