如何使用 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) 是放置目标元素。

示例

以下是触屏设备拖放功能的示例程序。

Open Compiler
<!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 和文本从网页文档的一个位置拖放到另一个位置。

更新于: 2022年11月18日

5K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告