拖放API? ? ? ?
? ? ? ? ? ?H5之前沒(méi)有拖放API痹屹,可以使用“鼠標(biāo)按下 + 鼠標(biāo)移動(dòng)”兩個(gè)事件來(lái)模擬用戶拖動(dòng)事件性穿。
? ? ? ? ? ?H5之后專門提供了七個(gè)鼠標(biāo)拖動(dòng)相關(guān)事件句柄:
? ? ? ? ? ? ?拖動(dòng)的源對(duì)象(source)可能觸發(fā)的事件:
???????? ? ? ? ? ?? dragstart:拖動(dòng)開始
??????? ? ? ? ? ??? drag:拖動(dòng)中
?????? ? ? ? ? ???? dragend:拖動(dòng)結(jié)束
?? ? ? ? ? ? 拖動(dòng)的目標(biāo)對(duì)象(target)可能觸發(fā)的事件:
??????? ? ? ? ? ??? dragenter:拖動(dòng)進(jìn)入
????? ? ? ? ? ????? dragover:拖動(dòng)懸停
?????? ? ? ? ? ???? drop:松手釋放
????? ? ? ? ? ????? dragleave:拖動(dòng)離開
? ? ? ? ? ?注意:拖放API事件句柄中所有的事件對(duì)象都有一個(gè)dataTransfer屬性(數(shù)據(jù)運(yùn)輸對(duì)象),用于在源對(duì)象和目標(biāo)對(duì)象間傳遞數(shù)據(jù)。
? ? ? ? ? ?源對(duì)象:event.dataTransfer.setData(key, value)
? ? ? ? ? ?目標(biāo)對(duì)象:var value = event.dataTransfer.getData(key)