十3、HTML 5 拖拽

@(HTML5)[HTML 5拖拽]

[TOC]

十3、HTML 5 拖拽

HTML 5 拖拽事件

圖片自帶拖拽功能 其餘元素可設置draggable屬性：draggable ：true 拖拽元素(被拖拽的元素)事件 :

• ondragstart : 拖拽的一瞬間觸發
• ondrag : 拖拽前、拖拽結束之間，連續觸發
• ondragend : 拖拽結束觸發

目標元素(拖拽元素被拖到的地方)事件 :

• ondragenter : 進入目標元素觸發
• ondragover : 進入目標、離開目標之間，連續觸發
• ondragleave : 離開目標元素觸發
• ondrop :在目標元素上釋放鼠標觸發 默認狀態下，一個元素不能放另外一元素的上面，須要在ondragover事件裏面阻止默認事件 IE沒效果

生命週期： dragstart -> drag -> dragenter -> dragover -> dragleave -> drop -> dragend

火狐下的兼容

火狐瀏覽器下需設置dataTransfer對象才能夠拖拽除圖片外的其餘標籤

• dataTransfer對象
• setData() : 設置數據 key和value(必須是字符串)
• getData() : 獲取數據，根據key值，獲取對應的value
• effectAllowed : 設置光標樣式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
• setDragImage ： 三個參數（指定的元素，座標X，座標Y）
• files： 獲取外部拖拽的文件，返回一個filesList列表
• filesList下有個type屬性，返回文件的類型

FileReader(讀取文件信息)

readAsDataURL

• 參數爲要讀取的文件對象
• onload當讀取文件成功完成的時候觸發此事件
• this. result 獲取讀取的文件數據