js实现原生拖拽innerHeight

最新推荐文章于 2024-07-10 14:36:18 发布

前端交互仔

最新推荐文章于 2024-07-10 14:36:18 发布

阅读量120

点赞数

分类专栏：前端(HTML 文章标签： JavaScript 拖拽兼容性事件监听 DOM操作

原文链接：https://copyfuture.com/blogs-details/20210518183218243z

版权

前端(HTML 专栏收录该内容

235 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>原生js实现拖拽demo（兼容）</title>
    <style type="text/css">
      html,
      body {
        padding: 0;
        margin: 0;
        overflow: hidden;
      }
      #obj {
        width: 100px;
        height: 100px;
        position: absolute;
        background-color: #ef4c6c;
        cursor: move;
      }
    </style>
  </head>
  <body>
    <div id="obj"></div>

    <script type="text/javascript">
      obj.onmousedown = function (e) {
        var e = e || window.event,
          sX = (e.pageX || e.clientX) - parseInt(obj.offsetLeft, 10),
          sY = (e.pageY || e.clientY) - parseInt(obj.offsetTop, 10);

        document.body.onmousemove = function (e) {
          document.body.onmouseup = document.body.onmouseleave = function (e) {
            document.body.onmousemove =
              document.body.onmouseup =
              document.body.onmouseleave =
                null;
          };

          with (obj.style) {
            left = (e.pageX || e.clientX) - sX + "px";
            top = (e.pageY || e.clientY) - sY + "px";
          }
        };
      };
    </script>
  </body>
</html>

https://copyfuture.com/blogs-details/20210518183218243z