前言
最近在做一個音樂播放器饼拍，里面想玩幾個騷操作，其中有個子功能是拖動文件蓖乘，特總結(jié)一下飘言。
相關(guān)事件
先來介紹一下相關(guān)的事件
在拖放的過程中會觸發(fā)以下事件：
以下是拖拽產(chǎn)生的一系列事件,拖拽事件產(chǎn)生時不會產(chǎn)生對應(yīng)的鼠標(biāo)事件.
- dragstart:拖拽開始時在被拖拽元素上觸發(fā)此事件,監(jiān)聽器需要設(shè)置拖拽所需數(shù)據(jù),從操作系統(tǒng)拖拽文件到瀏覽器時不觸發(fā)此事件.
- dragenter:拖拽鼠標(biāo)進(jìn)入元素時在該元素上觸發(fā),用于給拖放元素設(shè)置視覺反饋,如高亮
- dragover:拖拽時鼠標(biāo)在目標(biāo)元素上移動時觸發(fā).監(jiān)聽器通過阻止瀏覽器默認(rèn)行為設(shè)置元素為可拖放元素.
- dragleave:拖拽時鼠標(biāo)移出目標(biāo)元素時在目標(biāo)元素上觸發(fā).此時監(jiān)聽器可以取消掉前面設(shè)置的視覺效果.
- drag:拖拽期間在被拖拽元素上連續(xù)觸發(fā)
- drop:鼠標(biāo)在拖放目標(biāo)上釋放時,在拖放目標(biāo)上觸發(fā).此時監(jiān)聽器需要收集數(shù)據(jù)并且執(zhí)行所需操作.如果是從操作系統(tǒng)拖放文件到瀏覽器,需要取消瀏覽器默認(rèn)行為.
- dragend:鼠標(biāo)在拖放目標(biāo)上釋放時,在拖拽元素上觸發(fā).將元素從瀏覽器拖放到操作系統(tǒng)時不會觸發(fā)此事件.
不過我只用了ondragover和ondragend還有ondrop
值得注意的一點
使用這些事件實現(xiàn)拖動文件(項目中是拖動音頻文件到指定區(qū)域)的時候要記住使用event.preventDefault()。
chrome瀏覽器的drop事件的默認(rèn)行為是打開被放到放置目標(biāo)上的URL辣往。為了讓chrome支持正常的拖放兔院，還要取消drop事件的默認(rèn)行為,不過實現(xiàn)的時候我必須要在dragover上也加preventDefault才行，應(yīng)該是dragover也有默認(rèn)行為是打開url吧站削，知道的讀者請回復(fù)告知我坊萝。
DataTransfer對象
DataTransfer
先上MDN
總的來說就是拖動完后可以通過這個對象獲取數(shù)據(jù)信息。
核心屬性
比較核心的屬性是files包含一個在數(shù)據(jù)傳輸上所有可用的本地文件列表许起。如果拖動操作不涉及拖動文件十偶，此屬性是一個空列表。此屬性訪問指定的FileList
中無效的索引將返回未定義（undefined）街氢。
一個奇怪的情況
先上代碼
// vue里面事件綁定扯键，綁定drop事件
@drop.prevent="uploadMusic($event)"
...
uploadMusic(event) {
let self = this
console.dir(event)
console.dir(event.dataTransfer)
console.dir(event.dataTransfer.files[0])
let file = event.dataTransfer.files[0]
...
},
很迷的情況是我console.dir(event.dataTransfer)時files為空數(shù)組length為0
然而我event.dataTransfer.files[0]結(jié)果卻有。很奇怪啊珊肃，請知道的讀者留言告訴我怎么回事荣刑。
DataTransfer的其他方法(待補充)
反正現(xiàn)在只用到了dataTransfer里面的files，獲取從操作系統(tǒng)拖曳出來的文件伦乔。event.dataTransfer.files[0]
實戰(zhàn) (聯(lián)動)
現(xiàn)在我們做一個demo吧厉亏，拖曳音樂到指定區(qū)域，然后播放出音樂來烈和。
聯(lián)動
Audio對象(梁王的理論自習(xí)室)(未完成)
音樂拖動上傳播放(梁王的開發(fā)筆記)(未完成)
