原生js实现拖拽效果

原生js实现拖拽效果


概述：在前端领域当中拖拽是一个非常常见效果。拖拽三板斧鼠标按下》鼠标移动==〉鼠标弹起。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    .cur{
    /*  定位的元素才有left、top概念*/
      position: absolute;
      width: 200px;
      height: 200px;
      background: url("../img/770EC837-667F-4DB5-9D0B-C0C84CF479C4.jpg");
    /*  背景尺寸*/
      background-size: 200px 200px;
    }
  </style>
</head>
<body>
<div class="cur"></div>
</body>
</html>

<script type="text/javascript">
  //移除事件
  var cur = document.querySelector(".cur");
  // cur.onclick=function (){
  //     console.log("123");
  // }
  //
  // cur.onclick=123;

  //鼠标按下
  cur.onmousedown=function (event){
      // 短路语法兼容事件对象
      var e=event||window.event;
      //获取鼠标距离元素左侧顶部距离
      var startX=e.offsetX;
      var startY=e.offsetY;
      document.onmouseover=function (event){
          // 短路语法兼容事件对象
          var e1=event||window.event;

          cur.style.left=e1.clientX-startX+"px";
          cur.style.top=e1.clientY-startY+"px";

      }
  }
  //鼠标抬起事件---将鼠标移动事件移除
  cur.onmouseup=function (){
      document.onmouseover=null;
  }


</script>
posted @ 2023-03-11 00:29  King-DA  阅读(119)  评论(0)    收藏  举报