如何在 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.tw/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 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告