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

總結

以上是生活随笔為你收集整理的关于HTML实现拖放时出现禁止图标的解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。