JS魔法堂：IE5~9的DragDrop API - fsjohnhuang－IT工程師數位筆記本

文章出處

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

《 HTML5魔法堂：全面理解Drag & Drop API》中提到從IE5開始已經支持DnD API，但IE5~9與HTML5的API有所不同，下面我們來了解一下吧！

二、IE5~9與HTML5的DnD API的不同點　　　　　　　　　　　　　　　　

1. IE5~9DnD API僅對 img元素、 a[href]元素和 input[type=text]/textarea元素中被選中的文字有效，且不用設置 draggable="true" ; 而HTML5中凡是設置了 draggable="true" 特性的，均會啟用DnD API。

2. IE5~9下的[object DataTransfer]存儲的大類型中，不支持文件類型，僅支持字符串類型。因此無法實現從外部拖拽文件到文檔內，實現文件上傳的功能。

三、生命周期　　　　　　　　　　　　　　　　　　　　　　　　　　　

dragstart -> drag -> dragenter -> dragover -> dragleave -> drop -> dragend

四、[object DataTransfer]類型　　　　　　　　　　　　　　　　　　　　

void setData({DOMString} format, {DOMString} data) ：將指定格式的數據賦值給dataTransfer，format值范圍為URL、Text。

DOMString getData({DOMString} format) ：從DataTransfer對象中獲取指定格式的數據。

void clearData([{DOMString} format]) ：從DataTransfer對象中刪除指定格式或全部數據，僅在dragstart中調用。

effectAllowed 和 dropEffect 的取值范圍和作用請瀏覽《 HTML5魔法堂：全面理解Drag & Drop API#t8》

實測效果（由于我是在IE11下通過切換文檔模式來測試的，測試結果可能與實際的IE5~9有所差別，歡迎各位指正！）

瀏覽器	effectAllowed默認值	effectAllowed值	dropEffect默認值	默認使用的鼠標指針效果
IE5~9	uninitialized	uninitialized	copy	copy
		copy	copy	copy
		move	move	move
		link	link	link
		copyMove	none	copy
		copyLink	none	link
		linkMove	none	link
備注：	1. 不能通過 shift鍵切換copyLink，copyMove和linkMove的樣式； 2. 若effectAllowed設置為copyLink、copyMove或linkMove，且dropEffect與之對應，則鼠標樣式將為dropEffect所設置的樣式

五、深入探討各種DnD方式　　　　　　　　　　　　　　　　　　　　

拖拽方式分為：頁面內部的拖拽釋放、同域頁面間的拖拽釋放、異域頁面間的拖拽釋放、從操作系統拖拽資源到頁面、從頁面拖拽元素到操作系統或其他程序中釋放。

IE5~9的情況

拖拽方式	默認效果
頁面內部的拖拽釋放	1。拖拽 img元素和 a[href]元素時，對應的元素跟隨鼠標移動，但釋放無果; 2. 拖拽 input[type=text]/textarea元素中被選中的文字時，若在其他 input[type=text]/textarea元素上釋放，則會執行剪切粘貼操作。
同域頁面間的拖拽釋放	1.拖拽 img元素和 a[href]元素時，將使釋放所在的頁面重定向到圖片或超鏈接資源; 2.拖拽 input[type=text]/textarea元素中被選中的文字時，若在其他 input[type=text]/textarea元素上釋放，則會執行剪切粘貼操作; 3. 多個頁面共享dataTransfer對象; 4. 拖拽 img元素時會自動將圖片地址通過setData保存到Text和URL格式中。 5. 拖拽 a[href]元素時會自動將資源地址通過setData保存到Text和URL格式中 6. 拖拽 input[type=text]/textarea 中選中的文字時會自動將文本通過setData保存到Text格式中(URL格式返回null)
異域頁面間的拖拽釋放	1. dataTransfer對象不被共享; 2. 拖拽img元素和a[href]元素時，將使釋放所在的頁面重定向到圖片或超鏈接資源; 3. 拖拽input[type=text]/textarea元素中被選中的文字時，若在其他input[type=text]/textarea元素上釋放，則會執行剪切粘貼操作;
從操作系統拖拽資源到頁面	效果與異域頁面間的拖拽釋放一致
從頁面拖拽元素到操作系統或其他程序中釋放	1. 拖拽img元素和a[href]元素時，釋放將會將元素保存為圖片和網頁文件（根據瀏覽器安全設置，會彈出二次確定窗口） 2. 拖拽input[type=text]/textarea元素中被選中的文字時，在非OS自帶的文本編輯器中釋放時，會執行復制粘貼操作。

Chrome的情況

效果與IE5~9的相同，就是多了下面的幾點而已。

　　　1. 從操作系統拖拽資源到頁面，若拖拽的時文件資源，且在 input[type=file]元素上釋放，則文件路徑等信息會自動附加到 input[type=file]元素上;

2. 從頁面拖拽元素到操作系統活其他程序中釋放，除上述三種的其他 [draggable=true]元素，默認是可拖拽但無法釋放的。可通過 dataTransfer.setData 設置有效的URL格式數據，則可桌面等地方釋放元素，且效果與釋放超鏈接一致; 也可通過 dataTransfer.setData 設置Text格式數據，則可在非OS自帶的文本編輯器中釋放元素，效果與 input[type=text]/textarea元素中被選中的文字一致。

六、不對稱拖拽效果示例　　　　　　　　　　　　　　　　　　　　　　　　　

針對異域頁面拖拽釋放，我們舉個栗子！

頁面A：a.test.com，頁面B：b.test.com

由于兩個屬于異域頁面，因此默認情況下是無法共享dataTransfer的。現在通過 document.domain='test.com'; 修改頁面A所屬域，此時從頁面A開始拖拽，到頁面B釋放，dataTransfer對象將被共享。而從頁面B開始拖拽，到頁面A釋放，dataTransfer將無法共享。

七、總結　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

由于IE5~9原生DnD API功能不全，導致比較少人愿意了解它，相關資料也相對難找。上述內容均為個人測試結果，若有紕漏，歡迎大家指正，謝謝！

尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/3980563.html ^_^肥仔John

文章列表