HTML5 拖放元素

Hillbox

已于 2022-08-14 14:46:00 修改

阅读量133

点赞数 1

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

于 2022-08-14 14:20:15 首次发布

本文链接：https://blog.csdn.net/qq_33514421/article/details/126331298

版权

html5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

对书中案例的理解和注释。使用draggable属性和方法来实现元素拖放。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    *{margin:0;padding: 0;}
    body{position: relative;}
    img{position: absolute;}
  </style>
  <script>
    window.onload=function(){
      var oImg=document.getElementsByTagName("img")[0];
      // console.log("img坐标： " + oImg.x + " " + oImg.y);
      var offsetX,offsetY;
      //元素每次拖动开始时，记录它的坐标（偏移量）
      oImg.ondragstart=function(e){
        offsetX = e.offsetX;
        offsetY = e.offsetY;
        // e.offsetX、e.offsetY分别表示鼠标相对于触发事件的对象的X坐标、Y坐标
        // console.log("offset： " + offsetX + " " + offsetY);
      };
      //元素拖动过程中，重新设置它的坐标（偏移量）
      oImg.ondrag=function(e){
        if(e.pageX==0 && e.pageY==0){
          return;
        }
        // e.pageX、e.pageY分别表示鼠标相对于当前窗口的X坐标、Y坐标
        // console.log("page： " + e.pageX + " " + e.pageY);
        oImg.style.left = (e.pageX - offsetX) + "px";
        oImg.style.top = (e.pageY - offsetY) + "px";
      }
    }
  </script>
</head>
<body>
  <img src="img.png" alt="" draggable="true">
</body>
</html>