js-原生拖拽事件

最新推荐文章于 2024-02-22 16:53:56 发布

Silviaya

最新推荐文章于 2024-02-22 16:53:56 发布

阅读量172

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46368797/article/details/127573965

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>
      #box {
        height: 100px;
        width: 100px;
        border: 1px black solid;
        padding: 20px;
        margin: 30px;
        background-color: red;
        /* 设置定位属性，left和top才会生效 */
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
        var boxEle = document.getElementById("box");
        //1、监听鼠标按键被按下事件
        boxEle.onmousedown = function (ev) {
          var e = ev || window.event;

          //记录鼠标按下时与元素左侧的相对距离
          var X = e.clientX - boxEle.offsetLeft; 

          //记录鼠标按下时与元素上方的相对距离
          var Y = e.clientY - boxEle.offsetTop; 

          //2、监听鼠标按下后的移动事件
          document.onmousemove = function (ev) {
            var e = ev || window.event;
            boxEle.style.left = e.clientX - X + "px";//元素被移动后的坐标
            boxEle.style.top = e.clientY - Y + "px";//元素被移动后的坐标
          };

          //3、监听鼠标按键松开后的事件
          document.onmouseup = function () {
            document.onmousemove = null;//停止鼠标移动事件的触发
          };
        };
    </script>
  </body>
</html>