如何在 HTML5 中使用拖放功能？

拖放的概念简化了抓取对象并将其移动到不同位置的过程，这种方法非常动态且用户友好。它允许用户点击并拖动元素到另一个位置，然后松开鼠标按钮将其放置在那里。

拖放事件

拖放事件包含各种类型的事件，其中一些列在下面。

  • ondrag - 在 HTML 中用于描述元素或文本选择正在被移动。

  • ondragstart - 当拖动操作即将开始时调用的函数。

  • ondragenter - 用于确定放置目标是否接受放置。如果接受放置，则必须取消此事件。

  • ondragleave - 在拖动操作期间，当鼠标在合法放置目标之前离开元素时发生 ondragleave。

  • ondragover - 描述了拖动数据可以放置的位置。

  • ondrop - 描述拖动操作完成后放置的位置。

  • ondragend - 当用户完成拖动元素时，称为 ondragend。

让我们深入研究以下示例，以更深入地了解如何在 HTML5 中使用拖放功能。

示例 -（两个框之间的拖放）

在下面的示例中，我们创建了一个在两个框之间拖放图像的示例。

<!DOCTYPE HTML>
<html>
<head>
   
   <script>
      function allowDrop(ev) {
         ev.preventDefault();
      }
      function dragStart(ev) {
         ev.dataTransfer.setData("text", ev.target.id);
      }
      function dragDrop(ev) {
         preventDefault();
         var data = ev.dataTransfer.getData("text");
         ev.target.appendChild(document.getElementById(data));
      }
   </script>
   
   <style>
      .div1 {
         width: 240px;
         height: 75px;
         padding: 10px;
         border: 1px solid black;
         background-color: #F5F5F5;
      }
      p {
         font-size: 20px;
         font-weight: bold;
      }
   </style>

</head>
<body>
   <p>Image Drag and Drop in boxes</p>
   <div class="div1"
      ondrop="dragDrop(event)"
      ondragover="allowDrop(event)">
      <img id="drag1"
         src= "https://tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" draggable="true" ondragstart="dragStart(event)" width="220" height="70">
   </div>
   <br>
   <div class="div1"
      ondrop="dragDrop(event)"
      ondragover="allowDrop(event)">
   </div>
</body>
</html>

执行上述脚本后，它将生成显示两个框以及第一个框中图像的输出。当用户拖动图像时，拖动事件被触发，当用户将图像放置到第二个框中时，放置事件完成。

使用拖放进行数据传输

当整个拖放过程发生时，将使用数据传输属性。它用于保存从源拖取的数据，并将其放置在需要的位置。

示例

考虑以下示例，它说明了元素的可拖动属性的使用。

<!DOCTYPE HTML>
<html>
   
   <script>
      function allowDrop(ev) {
         ev.preventDefault();
      }
      function dragStart(ev) {
         ev.dataTransfer.setData("text", ev.target.id);
      }
      function dragDrop(ev) {
         ev.preventDefault();
         var data = ev.dataTransfer.getData("text");
         ev.target.appendChild(document.getElementById(data));
      }
   </script>
   
   <style>
      #box {
         margin: auto;
         width: 50%;
         height: 200px;
         border: 3px solid green;
         padding: 10px;
      }
      #box1,
      #box2,
      #box3 {
         float: left;
         margin: 5px;
         padding: 10px;
      }
      #box1 {
         width: 50px;
         height: 50px;
         background-color: #F5B5C5;
      }
      #box2 {
         width: 100px;
         height: 100px;
         background-color: #B5D5F5;
      }
      #box3 {
         width: 150px;
         height: 150px;
         background-color: #BEA7CC;
      }
      p {
         font-size: 20px;
         font-weight: bold;
         text-align: center;
      }
   </style>

</head>
<body>
   <p>Drag and drop of boxes</p>
   <div id="box">
      <div id="box1" draggable="true"
         ondragstart="dragStart(event)">
      </div>
      <div id="box2" draggable="true"
         ondragstart="dragStart(event)">
      </div>
      <div id="box3" ondrop="dragDrop(event)"
         ondragover="allowDrop(event)">
      </div>
   </div>
</body>
</html>

当脚本执行时，它将显示三个框，当用户开始拖放时。事件完成后，使用数据传输。它可以从一个框中提取数据并将其放到所需的框中。

更新于： 2022年10月12日

509 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.