HTML5 - Drag & drop

拖放（Drag and Drop，DnD）是一種功能強大的用戶界面概念，通過滑鼠單擊可以輕鬆地複製、重新排序和刪除項目。這允許用戶在一個元素上單擊並按住滑鼠按鈕，將其拖到另一個位置，然後釋放滑鼠按鈕將元素放在那裡。

要使用傳統的HTML4實現拖放功能，開發人員要麼必須使用複雜的JavaScript編程，要麼必須使用jQuery等其他JavaScript框架。

現在HTML5提供了一個拖放（Drag-and-Drop，DnD）API，它爲瀏覽器提供了原生的DnD支持，使得編寫代碼更加容易。

HTML5DND受所有主要瀏覽器的支持，如Chrome、Firefox3.5和Safari4等。

Drag and Drop Events

在拖放操作的各個階段中觸發的事件數。下面列出了這些事件;

Sr.No.	Events & Description
1	dragstart公司當用戶開始拖動對象時激發。
2	德拉根特當滑鼠第一次移動到目標元素上而發生拖動時激發。此事件的偵聽器應指示是否允許刪除此位置。如果沒有偵聽器，或者偵聽器不執行任何操作，則默認情況下不允許刪除。
3	排水管當發生拖動時，當滑鼠移到某個元素上時，將觸發此事件。大多數情況下，偵聽器期間發生的操作將與dragenter事件相同。
4	德拉格里夫當滑鼠在拖動時離開元素時，將觸發此事件。監聽器應移除用於放置反饋的任何突出顯示或插入標記。
5	阻力每次拖動對象時移動滑鼠時激發。
6	下降拖放事件將在拖放操作結束時發生拖放的元素上觸發。監聽器將負責檢索被拖動的數據並將其插入拖放位置。
7	德拉根德當用戶在拖動對象時釋放滑鼠按鈕時激發。

注意−注意，僅觸發拖動事件;在拖動操作期間不會觸發滑鼠事件（如mousemove）。

The DataTransfer Object

所有拖放事件的事件偵聽器方法都接受event對象，該對象具有名爲dataTransfer的只讀屬性。

event.dataTransfer返回與事件關聯的dataTransfer對象，如下所示−

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

DataTransfer對象保存有關拖放操作的數據。可以根據與DataTransfer對象相關聯的各種屬性來檢索和設置這些數據，如下所述−

Sr.No.	DataTransfer attributes and their description
1	dataTransfer.dropEffect[=值] 返回當前選定的操作類型。可以設置此屬性，以更改選定的操作。可能的值爲「無」、「複製」、「連結」和「移動」。
2	datatransfer.effectallowed[=value 返回允許的操作類型。可以設置此屬性，以更改允許的操作。可能的值有：none、copy、copy link、copy move、link、linkMove、move、all和uninitialized。
3	數據傳輸.types 返回一個DOMStringList，列出在dragstart事件中設置的格式。此外，如果正在拖動任何文件，則其中一種類型將是字符串「files」。
4	dataTransfer.clearData（[格式]）刪除指定格式的數據。如果省略參數，則刪除所有數據。
5	datatransfer.setdata（format，data 添加指定的數據。
6	data=dataTransfer.getData（格式）返回指定的數據。如果沒有這樣的數據，則返回空字符串。
7	數據傳輸.files 返回要拖動的文件的文件列表（如果有）。
8	dataTransfer.setDragImage（元素，x，y）使用給定元素更新拖動反饋，替換以前指定的任何反饋。
9	數據傳輸.addElement（元素）將給定元素添加到用於呈現拖動反饋的元素列表中。

Drag and Drop Process

以下是執行拖放操作的步驟;

Step 1 - Making an Object Draggable

下面是需要採取的步驟;

如果要拖動元素，則需要將該元素的draggable屬性設置爲true。
Set an event listener for dragstart公司 that stores the data being dragged.
The event listener dragstart公司 will set the allowed effects (copy, move, link, or some combination).

下面是使對象可拖動的示例−

Live Demo

<!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(ev)">
            <p>Drag Me</p>
         </div>
         
         <div id = "boxB">Dustbin</div>
      </center>
      
   </body>
</html>

這將產生以下結果&負;

Step 2 - Dropping the Object

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

The 德拉根特 event, which is used to determine whether or not the drop target is to accept the drop. If the drop is to be accepted, then this event has to be canceled.
The 排水管 event, which is used to determine what feedback is to be shown to the user. If the event is canceled, then the feedback (typically the cursor) is updated based on the dropEffect attribute's value.
Finally, the 下降 event, which allows the actual drop to be performed.

下面是將一個對象放入另一個對象中的示例−

Live Demo

<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>

這將產生以下結果&負;