Web入门：HTML5拖放

时间：2022-12-25 16:59:12

欢迎来的我的小院，恭喜你今天又要涨知识了！Web入门：HTML5拖放

案例内容

利用ondragstart、ondragover、ondrop属性，并编写相关代码，完成图片的拖放。

演示

Web入门：HTML5拖放Web入门：HTML5拖放

学习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>小院里的霍大侠</title>
    <!-- 拖放事件函数 -->
    <script>
      function allow(e) {
        e.preventDefault();
      }
      function drag(e) {
        e.dataTransfer.setData("Text",e.target.id);
      }
      function drop(e) {
        e.preventDefault();
        let data=e.dataTransfer.getData("Text");
        e.target.appendChild(document.getElementById(data));
      }
    </script>
  </head>
  <body>
    <!-- 拖放事件的HTML元素 -->
    <div>
      <p>拖动图片放置到框中</p>
      <p  ondrop="drop(event)" ondragover="allow(event)"></p>
      <img  src="1.png" draggable="true" ondragstart="drag(event)" width="100" height="100">
    </div>
  </body>
  <!-- CSS样式 --> 
  <style>
    div
    {
      width: 500px;
      height: 500px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 300px;
      margin: auto;
    }
    #drop {width:100px;height:100px;padding:10px;border:1px solid #aaaaaa;}
  </style>
</html>

总结思考

学习点： 1、draggable="true" ：元素可拖动 2、ondragstart ：规定当元素被拖动时，会发生什么 3、ondragover ：规定在何处放置被拖动的数据 4、ondrop ：进行放置 5、dataTransfer.setData() ：设置被拖数据的数据类型和值 6、preventDefault() ：阻止浏览器对元素的默认处理方式 7、dataTransfer.getData("Text") ：获得被拖的数据

拖放（Drag 和 drop）是 HTML5 标准的组成部分。可以使用拖放进行验证，识别人机。拖放可以使你的界面不再单调无趣。

关注我，跟着我每天学习一点点，让你不在枯燥，不在孤单..

全网可搜：小院里的霍大侠， 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。

标签：

相关文章