HTML5拖放操作API
如果網頁元素的draggable元素為true，這個元素就是可以拖動的。
<div draggable="true">Draggable Div</div>
在大多數瀏覽器中，a元素和img元素默認就是可以拖放的，但是為了保險起見，最好還是加上draggable屬性。
拖動過程會觸發很多事件，主要有下面這些：
- dragstart：網頁元素開始拖動時觸發。
- drag：被拖動的元素在拖動過程中持續觸發。
- dragenter：被拖動的元素進入目標元素時觸發，應在目標元素監聽該事件。
- dragleave：被拖動的元素離開目標元素時觸發，應在目標元素監聽該事件。
- dragover：被拖動元素停留在目標元素之中時持續觸發，應在目標元素監聽該事件。
- drap：被拖動元素或從文件系統選中的文件，拖放落下時觸發。
- dragend：網頁元素拖動結束時觸發。
- drop：處理被拖動元素(從原來的位置刪除stopPropagation())
調用示例：
draggableElement.addEventListener('dragstart', function(e) {
console.log('拖動開始！');
});
dataTransfer對象的屬性：
- dropEffect：拖放的操作類型，決定了瀏覽器如何顯示鼠標形狀，可能的值為copy、move、link和none。
- effectAllowed：指定所允許的操作，可能的值為copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默認值，等同於all，即允許一切操作）。
- files：包含一個FileList對象，表示拖放所涉及的文件，主要用於處理從文件系統拖入瀏覽器的文件。
- types：儲存在DataTransfer對象的數據的類型。
dataTransfer對象的方法：
- setData(format, data)：在dataTransfer對象上儲存數據。第一個參數format用來指定儲存的數據類型，比如text、url、text/html等。
- getData(format)：從dataTransfer對象取出數據。
- clearData(format)：清除dataTransfer對象所儲存的數據。如果指定了format參數，則只清除該格式的數據，否則清除所有數據。
- setDragImage(imgElement, x, y)：指定拖動過程中顯示的圖像。默認情況下，許多瀏覽器顯示一個被拖動元素的半透明版本。參數imgElement必須是一個圖像元素，而不是指向圖像的路徑，參數x和y表示圖像相對於鼠標的位置。
dataTransfer對象允許在其上存儲數據，這使得在被拖動元素與目標元素之間傳送信息成為可能。
本次試用遇到的問題：
在拖放的過程中遇到當一個div上有其他元素，例如P、label、img等，在拖動到P、label時會出現禁止拖動的圖標
分析及解決方案：
拖動到的“目的地”並不接受拖動的元素-----這是因為當拖動元素經過document時，document對象默認阻止了拖動事件，而其他HTML組件也位於document對象內，因此它們也不能接受“放”。
因此我們需要將目標元素加兩個事件ondragenter ondragover事件內容為event.preventDefault()