drag事件用法
html5的drag事件總共有 7 個,還有一個事件傳遞對象
拖曳目標對象
ondragstart 拖曳開始
ondrag 拖曳中
ondragend 拖曳結束
釋放對象
ondragenter 進入釋放目標
ondragover 在目標中拖曳
ondragleave 離開釋放目標
ondrop 釋放
各個事件的觸發順序
ondragstart -> ondrag -> ondragenter -> ondragover -> ondragleave -> ondragend -> ondrop
事件傳遞對象 dataTransfer
用來在拖曳過程中傳遞數據。
對象屬性:
dropEffect:設置或返回拖放目標上允許發生的拖放行為。如果此處設置的拖放行為不再effectAllowed屬性設置的多種拖放行為之內,拖放操作將會失敗。該屬性值只允許為“null”、“copy”、“link”和“move”四值之一。
effectAllowed:設置或返回被拖動元素允許發生的拖動行為。該屬性值可設為“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。
items:該屬性返回DataTransferItems對象,該對象代表了拖動數據。
types:該屬性返回一個DOMStringList對象,該對象包括了存入dataTransfer中數據的所有類型。
對象方法:
setData(format,data):將指定格式的數據賦值給dataTransfer對象,參數format定義數據的格式也就是數據的類型,data為待賦值的數據
getData(format):從dataTransfer對象中獲取指定格式的數據,format代表數據格式,data為數據。
clearData([format]):從dataTransfer對象中刪除指定格式的數據,參數可選,若不給出,則為刪除對象中所有的數據。
addElement(element):添加自定義圖標
setDragImage(element,x,y):設置拖放操作的自定義圖標。其中element設置自定義圖標,x設置圖標與鼠標在水平方向上的距離,y設置圖標與鼠標在垂直方向上的距離。
瀏覽器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖動。
注意:Safari 5.1.2不支持拖動;在拖動元素時,每隔 350 毫秒會觸發 ondragover 事件。
支持度很高,無需擔心兼容性。