原生js实现拖拽特效_拖拉拽特效-CSDN博客

本文链接：https://blog.csdn.net/weixin_45781661/article/details/124294106

原生js实现拖拽特效

效果图和代码如下

在这里插入图片描述

<!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>
    body {
      width: 100vw;
      min-height: 100vh;
    }

    #drag {
      transition: all .3s ease-out;
      -webkit-transition: all .3s ease-out;
    }

    .wrap #drag span {
      display: block;
      padding: 5px 10px;
      border: 1px solid #722909;
      text-align: center;
      vertical-align: middle;
    }
  </style>
</head>

<body>

  <div class="wrap">
    <div id="drag" style="width: 4.2rem;position: absolute;top: 5.2rem;right: 0.1rem;">
      <!--  可以是图片 -->
      <!-- <img src="./images/demo.png" alt=""> -->
      <span>文字</span>
    </div>
  </div>
  <script>
    // 拖动，获取要拖动的元素
    var div1 = document.querySelector("#drag");
    //限制最大宽高，不让滑块出去
    var maxW = document.body.clientWidth - div1.offsetWidth;
    var maxH = document.body.clientHeight - div1.offsetHeight;
    var oL, oT, oLeft;
    //手指触摸开始，记录div的初始位置
    div1.addEventListener("touchstart", function (e) {
      e.stopPropagation();
      var ev = e || window.event;
      var touch = ev.targetTouches[0];
      oL = touch.clientX - div1.offsetLeft;
      oT = touch.clientY - div1.offsetTop;
      document.addEventListener("touchmove", null);
    });
    //触摸中的，位置记录
    div1.addEventListener("touchmove", function (e) {
      e.stopPropagation();
      e.preventDefault();
      var ev = e || window.event;
      var touch = ev.targetTouches[0];
      oLeft = touch.clientX - oL;
      var oTop = touch.clientY - oT;
      if (oLeft < 0) {
        oLeft = 0;
      } else if (oLeft >= maxW) {
        oLeft = maxW;
      }
      if (oTop < 0) {
        oTop = 0;
      } else if (oTop >= maxH) {
        oTop = maxH;
      }
      div1.style.left = oLeft + "px";
      div1.style.top = oTop + "px";
    });
    //触摸结束时的处理
    div1.addEventListener("touchend", function (e) {
      e.stopPropagation();
      // 防止logo停留在页面中部
      if (oLeft > (maxW / 2)) {
        oLeft = maxW
      } else if (oLeft < (maxW / 2)) {
        oLeft = 0
      }
      div1.style.left = oLeft + "px";
      document.removeEventListener("touchmove", null);

    });
  </script>
</body>

</html>