js拖拽功能实现

lionliu0519

已于 2023-04-17 00:24:20 修改

阅读量1.4k

点赞数

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

于 2023-04-06 23:24:34 首次发布

本文链接：https://blog.csdn.net/m0_51354601/article/details/130001860

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .drag {
        width: 100px;
        height: 100px;
        border-radius: 100%;
        background-color: aqua;
        position: absolute;
      } 

      body {
        width: 100vh;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div class="drag" id="drag"></div>
  </body>
  <script>
    let drag = document.getElementById("drag");
    drag.onmouseover = function (e) {
      let oldX = e.offsetX;
        oldY = e.offsetY;
        console.log(oldX,oldY);
        window.onmouseover = function (e) {
            console.log(e.clientX,e.clientY);
            drag.style.left = e.clientX-oldX + "px";
            drag.style.top = e.clientY-oldY + "px";
        }
    };
  </script>
</html>