HTML5 拖放元素

原创已于 2022-08-14 14:46:00 修改 · 231 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html

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

html5 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个简单的HTML元素拖放示例，通过JavaScript实现元素在页面上的拖拽移动。该示例利用了ondragstart和ondrag事件，记录并更新被拖动元素的位置。

对书中案例的理解和注释。使用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>