HTML5拖放操作API

如果網(wǎng)頁(yè)元素的draggable元素為true，這個(gè)元素就是可以拖動(dòng)的。

<div draggable="true">Draggable Div</div>

在大多數(shù)瀏覽器中，a元素和img元素默認(rèn)就是可以拖放的，但是為了保險(xiǎn)起見(jiàn)，最好還是加上draggable屬性。

拖動(dòng)過(guò)程會(huì)觸發(fā)很多事件，主要有下面這些：

dragstart：網(wǎng)頁(yè)元素開始拖動(dòng)時(shí)觸發(fā)。
drag：被拖動(dòng)的元素在拖動(dòng)過(guò)程中持續(xù)觸發(fā)。
dragenter：被拖動(dòng)的元素進(jìn)入目標(biāo)元素時(shí)觸發(fā)，應(yīng)在目標(biāo)元素監(jiān)聽(tīng)該事件。
dragleave：被拖動(dòng)的元素離開目標(biāo)元素時(shí)觸發(fā)，應(yīng)在目標(biāo)元素監(jiān)聽(tīng)該事件。
dragover：被拖動(dòng)元素停留在目標(biāo)元素之中時(shí)持續(xù)觸發(fā)，應(yīng)在目標(biāo)元素監(jiān)聽(tīng)該事件。
drap：被拖動(dòng)元素或從文件系統(tǒng)選中的文件，拖放落下時(shí)觸發(fā)。
dragend：網(wǎng)頁(yè)元素拖動(dòng)結(jié)束時(shí)觸發(fā)。
drop：處理被拖動(dòng)元素(從原來(lái)的位置刪除stopPropagation())

調(diào)用示例：

draggableElement.addEventListener('dragstart', function(e) {
    console.log('拖動(dòng)開始！');
});

dataTransfer對(duì)象的屬性：

dropEffect：拖放的操作類型，決定了瀏覽器如何顯示鼠標(biāo)形狀，可能的值為copy、move、link和none。
effectAllowed：指定所允許的操作，可能的值為copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默認(rèn)值，等同于all，即允許一切操作）。
files：包含一個(gè)FileList對(duì)象，表示拖放所涉及的文件，主要用于處理從文件系統(tǒng)拖入瀏覽器的文件。
types：儲(chǔ)存在DataTransfer對(duì)象的數(shù)據(jù)的類型。

dataTransfer對(duì)象的方法：

setData(format, data)：在dataTransfer對(duì)象上儲(chǔ)存數(shù)據(jù)。第一個(gè)參數(shù)format用來(lái)指定儲(chǔ)存的數(shù)據(jù)類型，比如text、url、text/html等。
getData(format)：從dataTransfer對(duì)象取出數(shù)據(jù)。
clearData(format)：清除dataTransfer對(duì)象所儲(chǔ)存的數(shù)據(jù)。如果指定了format參數(shù)，則只清除該格式的數(shù)據(jù)，否則清除所有數(shù)據(jù)。
setDragImage(imgElement, x, y)：指定拖動(dòng)過(guò)程中顯示的圖像。默認(rèn)情況下，許多瀏覽器顯示一個(gè)被拖動(dòng)元素的半透明版本。參數(shù)imgElement必須是一個(gè)圖像元素，而不是指向圖像的路徑，參數(shù)x和y表示圖像相對(duì)于鼠標(biāo)的位置。

dataTransfer對(duì)象允許在其上存儲(chǔ)數(shù)據(jù)，這使得在被拖動(dòng)元素與目標(biāo)元素之間傳送信息成為可能。

本次試用遇到的問(wèn)題：

在拖放的過(guò)程中遇到當(dāng)一個(gè)div上有其他元素，例如P、label、img等，在拖動(dòng)到P、label時(shí)會(huì)出現(xiàn)禁止拖動(dòng)的圖標(biāo)

分析及解決方案：

拖動(dòng)到的“目的地”并不接受拖動(dòng)的元素-----這是因?yàn)楫?dāng)拖動(dòng)元素經(jīng)過(guò)document時(shí)，document對(duì)象默認(rèn)阻止了拖動(dòng)事件，而其他HTML組件也位于document對(duì)象內(nèi)，因此它們也不能接受“放”。

因此我們需要將目標(biāo)元素加兩個(gè)事件ondragenter ondragover事件內(nèi)容為event.preventDefault()

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。