HTML - 拖放 API

拖放 API

拖放 (DnD) 是一種強大的使用者介面概念，它可以藉助滑鼠點選和移動輕鬆地複製、重新排序和刪除專案。這允許使用者點選並按住滑鼠按鈕，將其懸停在一個元素上，將其拖動到另一個位置，然後釋放滑鼠按鈕以將其放置在那裡。

要使用傳統的 HTML4 實現拖放功能，開發者要麼必須使用複雜的 JavaScript 程式設計，要麼使用其他 JavaScript 框架，例如 jQuery 等。

現在，HTML5 推出了拖放 (DnD) API，它為瀏覽器帶來了原生的 DnD 支援，從而使編碼變得更加容易。它受所有主要瀏覽器支援，例如 Chrome、Firefox 3.5、Safari 4 等。

建立可拖動的 HTML 元素

您可以使用具有特定元素的draggable 屬性來建立可拖動的 HTML 元素。將“true”值設定為draggable 屬性，即可使任何 HTML 元素（例如影像、div、檔案或連結）啟用拖動。

語法

以下語法演示瞭如何使div 元素可拖動

<div draggable="true">

拖放事件

在拖放操作的各個階段會觸發許多事件。這些事件列在下面：

序號	事件和描述
1	dragstart 當用戶開始拖動物件時觸發。
2	dragenter 當滑鼠在拖動過程中第一次移到目標元素上時觸發。此事件的偵聽器應指示是否允許在此位置放下。如果沒有偵聽器，或者偵聽器不執行任何操作，則預設情況下不允許放下。
3	dragover 當拖動過程中滑鼠移動到元素上時觸發此事件。大多數情況下，偵聽器期間發生的操作將與 dragenter 事件相同。
4	dragleave 當拖動過程中滑鼠離開元素時觸發此事件。偵聽器應刪除用於放下反饋的任何高亮顯示或插入標記。
5	drag 每次拖動物件時滑鼠移動都會觸發。
6	drop 在拖放操作結束時，在發生放下的元素上觸發 drop 事件。偵聽器將負責檢索被拖動的事件並將其插入到放下位置。
7	dragend 當用戶在拖動物件時釋放滑鼠按鈕時觸發。

注意 - 請注意，只有拖動事件會被觸發；在拖動操作期間不會觸發滑鼠事件，例如 mousemove。

DataTransfer 物件

所有拖放事件的事件偵聽器方法都接受 Event 物件，該物件具有名為dataTransfer的只讀屬性。

event.dataTransfer 返回與事件關聯的DataTransfer 物件，如下所示

function EnterHandler(event) {
   DataTransfer dt = event.dataTransfer;
   .............
}

DataTransfer 物件儲存有關拖放操作的資料。這些資料可以根據與 DataTransfer 物件關聯的各種屬性來檢索和設定，如下所述：

序號	屬性和描述
1	dataTransfer.dropEffect [ = value ] 返回當前選擇的運算型別。可以設定此屬性來更改所選操作。可能的值為 none、copy、link 和 move。
2	dataTransfer.effectAllowed [ = value ] 返回允許的操作型別。可以設定此屬性來更改允許的操作。可能的值為none、copy、copyLink、copyMove、link、linkMove、move、all 和 uninitialized。
3	dataTransfer.types 返回一個 DOMStringList，其中列出了在 dragstart 事件中設定的格式。此外，如果正在拖動任何檔案，則其中一個型別將是字串“Files”。
4	dataTransfer.clearData ( [ format ] ) 刪除指定格式的資料。如果省略引數，則刪除所有資料。
5	dataTransfer.setData(format, data) 新增指定的資料。
6	data = dataTransfer.getData(format) 返回指定的資料。如果沒有此類資料，則返回空字串。
7	dataTransfer.files 返回正在拖動的檔案的 FileList（如果存在）。
8	dataTransfer.setDragImage(element, x, y) 使用給定的元素更新拖動反饋，替換任何先前指定的反饋。
9	dataTransfer.addElement(element) 將給定的元素新增到用於呈現拖動反饋的元素列表中。

拖放過程

以下是實現拖放操作需要執行的步驟：

步驟 1 - 使物件可拖動

以下是需要採取的步驟：

如果要拖動元素，則需要為該元素將draggable屬性設定為true。
為dragstart設定一個事件偵聽器，以儲存正在拖動的檔案。
事件偵聽器dragstart將設定允許的效果（複製、移動、連結或某種組合）。

示例

以下是使物件可拖動的示例：

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
      #boxA,
      #boxB {
         float: left;
         padding: 10px;
         margin: 10px;
         -moz-user-select: none;
      }
      #boxA {
         background-color: #6633FF;
         width: 75px;
         height: 75px;
      }
      #boxB {
         background-color: #FF6699;
         width: 150px;
         height: 150px;
      }
   </style>
   <script type="text/javascript">
      function dragStart(ev) {
         ev.dataTransfer.effectAllowed = 'move';
         ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
         ev.dataTransfer.setDragImage(ev.target, 0, 0);
         return true;
      }
   </script>
</head>
<body>
   <center>
      <h2>Drag and drop HTML5 demo</h2>
      <div>Try to drag the purple box around.</div>
      <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
         <p>Drag Me</p>
      </div>
      <div id="boxB">Dustbin</div>
   </center>
</body>
</html>

步驟 2 - 放下物件

要接受放下，放下目標必須至少偵聽三個事件。

dragenter事件，用於確定放下目標是否要接受放下。如果要接受放下，則必須取消此事件。
dragover事件，用於確定要向用戶顯示什麼反饋。如果取消了事件，則根據 dropEffect 屬性的值更新反饋（通常是游標）。
最後，drop事件，允許執行實際的放下。

示例

以下是將物件放到另一個物件的示例：

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
      #boxA,
      #boxB {
         float: left;
         padding: 10px;
         margin: 10px;
         -moz-user-select: none;
      }

      #boxA {
         background-color: #6633FF;
         width: 75px;
         height: 75px;
      }

      #boxB {
         background-color: #FF6699;
         width: 150px;
         height: 150px;
      }
   </style>
   <script type="text/javascript">
      function dragStart(ev) {
         ev.dataTransfer.effectAllowed = 'move';
         ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
         ev.dataTransfer.setDragImage(ev.target, 0, 0);
         return true;
      }

      function dragEnter(ev) {
         event.preventDefault();
         return true;
      }

      function dragOver(ev) {
         return false;
      }

      function dragDrop(ev) {
         var src = ev.dataTransfer.getData("Text");
         ev.target.appendChild(document.getElementById(src));
         ev.stopPropagation();
         return false;
      }
   </script>
</head>
<body>
   <center>
      <h2>Drag and drop HTML5 demo</h2>
      <div>Try to move the purple box into the pink box.</div>
      <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
         <p>Drag Me</p>
      </div>
      <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
   </center>
</body>
</html>

列印頁面