如何使用 JavaScript 拖放功能实现触摸设备的拖放操作？

在这篇文章中，我们将讨论如何在 JavaScript 中使用 JavaScript 拖放功能实现触摸设备的拖放操作。

使用 JavaScript，我们只能拖动图像和一些文本。要拖动图像，我们只需按住鼠标按钮，然后移动它。要拖动文本，我们需要高亮显示一些文本，然后以与图像相同的方式拖动它。

HTML5 规定几乎所有元素都可以拖动。要使元素可拖动，我们只需将 draggable 属性及其值为 true 添加到其 HTML 元素标签中。

语法

以下是使元素可拖动的语法。

<div class="item" draggable="true"></div>

以下是可拖动元素上的事件。当我们拖动元素时，这些事件会按顺序触发。

  • dragstart

  • drag

  • dragend

当您按住鼠标按钮并开始移动鼠标时，dragstart 事件将在您正在拖动的可拖动元素上触发。在 dragstart 事件触发后，只要您拖动元素，drag 事件就会重复触发。当您停止拖动元素时，dragend 事件触发。

当您将元素拖到有效的放置目标上时，这些事件会按以下顺序触发。

  • dragenter

  • dragover

  • dragleave 或 drop

当您将元素拖到放置目标上时，dragenter 事件会立即触发。

在 dragenter 事件触发后，只要您将元素拖动在放置目标的边界内，dragover 事件就会重复触发。

当您将元素拖出放置目标的边界时，dragover 事件停止触发，dragleave 事件触发。

如果您将元素放置在目标上，则 drop 事件会触发，而不是 dragleave 事件。

dragenter、dragover、dragleave 和 drop 事件的目标 (e.target) 是放置目标元素。

示例

以下是触摸设备拖放操作的示例程序。

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      #div1, #div2 {
         float: left;
         width: 100px;
         height: 35px;
         margin: 10px;
         padding: 10px;
         border: 1px solid black;
      }
   </style>
   <script>
      function allowDrop(img) {
         img.preventDefault();
      }
      function drag(img) {
         img.dataTransfer.setData("text", img.target.id);
      }
      function drop(img) {
         img.preventDefault();
         var data = img.dataTransfer.getData("text");
         img.target.appendChild(document.getElementById(data));
      }
   </script>
</head>
<body>
   <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="https://tutorialspoint.com/javascript/images/javascript-mini-logo.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
   </div>
   <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br><br><br><br><br>
   <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
      <br><br><br><br><br><br>
   <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>

我们可以将图像、gif 和文本从 web 文档中的一个位置拖放到另一个位置。

更新于: 2022年11月18日

5K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.