h5 拖放 | Filereader | 音頻、視頻 | 地理信息

時間 2019-12-08

標籤 h5 拖放 filereader 音頻視頻地理信息简体版

原文原文鏈接

拖放 drag

在標籤中添加draggable="true"，標籤便可拖動。html

七個事件

1.ondragstart 拖放開始
2.ondrag 拖放中
3.ondragend 拖放結束
4.ondragenter 拖拽其餘元素進入綁定事件的元素（從鼠標進入算進入）
5.ondragover 拖拽其餘元素進入綁定事件的元素後（持續發生，同ondrag）
6.ondragleave 拖拽其餘元素離開綁定事件的元素（從鼠標離開算離開）
7.ondrog 拖拽其餘元素到綁定事件的元素中鬆開
數組

看完上面gif圖的有沒有發現，前三個事件都觸發了，爲啥第四個事件，drop 不會觸發呢？爲何在黑框裏面放置紅方塊不會觸發，在外面放置也不會觸發？
這是由於，ondragover這個事件有一個默認行爲，在 ondragover的最後默認被拖拽的元素回到原位（我是這麼理解的），這樣就解釋了，在被綁定元素中鬆開了拖拽元素，沒有觸發ondrog而是觸發了ondragleave。
若是你想完成的操做是，把紅色的塊放到咱們綁定事件的盒子中鬆開從而觸發事件ondrog，那麼就阻止ondragover的默認行爲
box.ondragover = function(e){
e.preventDefault();
console.log('over');
}
這樣就能夠觸發ondrog。
同時，阻止了ondragover的默認行爲後，把紅色的塊放到咱們綁定事件的盒子中鬆開這個操做再也不觸發ondragleave，只觸發ondrog。
更多參考： www.cnblogs.com/yanggeng/p/…