如何使用 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.tw/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+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.