Js 实现dom元素拖动

最新推荐文章于 2021-11-03 21:39:56 发布

前端卡卡西呀

最新推荐文章于 2021-11-03 21:39:56 发布

阅读量1.2k

点赞数 3

分类专栏：前端 Javascript

本文链接：https://blog.csdn.net/RedaTao/article/details/110957156

版权

前端同时被 2 个专栏收录

145 篇文章 5 订阅

订阅专栏

Javascript

48 篇文章 0 订阅

订阅专栏

原生Javascript实现元素随鼠标拖动而移动的效果：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      #drag {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        background: #0ff;
      }
    </style>
    <div id="drag"></div>
    <script>
      let el = document.getElementById("drag");

      el.onmousedown = function (e) {
        e = e || window.event;
        // 初始位置
        let offleft = e.movementX;
        let offTop = e.movementY;
        // 鼠标点击位置
        let startX = e.clientX;
        let startY = e.clientY;

        console.log(startX, startY);

        el.setCapture && el.setCapture();

        document.onmousemove = function (event) {
          event = event || window.event;

          // 鼠标停止位置
          let endX = event.clientX;
          let endY = event.clientY;

          // 移动距离
          let moveX = endX - startX;
          let moveY = endY - startY;

          // 元素最终位置
          let lastX = offleft + moveX;
          let lastY = offTop + moveY;

          // console.log(moveX, moveY, lastX, lastY);

          //边界处理
          if (
            lastX >
            document.documentElement.clientWidth - el.clientWidth - 20
          ) {
            lastX = document.documentElement.clientWidth - el.clientWidth - 20;
          } else if (lastX < 20) {
            lastX = 0;
          }

          if (
            lastY >
            document.documentElement.clientWidth - el.clientWidth - 20
          ) {
            lastY =
              document.documentElement.clientHeight - el.clientHeight - 20;
          } else if (lastY < 20) {
            lastY = 0;
          }

          el.style.left = lastX + "px";
          el.style.top = lastY + "px";
        };
        //
        document.onmouseup = function () {
          document.ontouchmove = null;

          document.releaseCapture && document.releaseCapture();
        };
        return false;
      };
    </script>
  </body>
</html>

前端卡卡西呀

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
Js 实现dom元素拖动

原生Javascript实现元素随鼠标拖动而移动的效果：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </
复制链接

扫一扫