關於HTML實現拖放時出現禁止圖標的解決方案 HTML5拖放操做API

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