One, foreword
The DnD API has been supported since IE5, but IE5~9 is different from HTML5’s API. Let’s take a look.
Second, differences between IE5~9 and HTML5 DnD API
1. The IE5~9DnD API only applies to img elements, a[href] elements, and input[type=text]/textarea elements with the selected text, and does not set draggable=”true”; The DnD API will be enabled for any HTML5 draggable=”true” feature.
2. The Object DataTransfer in Internet Explorer 5 to 9 does not support file types, but only string types. Therefore, it cannot realize the function of dragging files from the outside to the document and realizing file uploading.
Life cycle
dragstart -> drag -> dragenter -> dragover -> dragleave -> drop -> dragend
[Object DataTransfer
Void setData({DOMString} format, {DOMString} data) : assigns data in the specified format to the dataTransfer. The format value ranges from URL to Text.
DOMString getData({DOMString} format) : Retrieves data in the specified format from a DataTransfer object.
Void clearData([{DOMString} format]) : Removes the specified format or all data from the DataTransfer object, only called in dragstart.
For the ranges and effects of effectalhoward and dropEffect, see HTML5 magic hall: a complete understanding of Drag & Drop API#t8.
Measured effect (because I am in IE11 by switching document mode to test, test results may be different from the actual IE5~9, welcome to correct!)
| The browser | EffectAllowed default values | EffectAllowed value | DropEffect default values | Default mouse pointer effect used |
| IE5~9 | uninitialized | uninitialized | copy | copy |
| copy | copy | copy | ||
| move | move | move | ||
| link | link | link | ||
| copyMove | none | copy | ||
| copyLink | none | link | ||
| linkMove | none | link | ||
| Remark: |
1. Cannot passThe shift key Toggle copyLink, copyMove and linkMove styles; 2. If Effectalhoward is set to copyLink, copyMove, or linkMove, and dropEffect corresponds to that, the mouse style will be set to dropEffect |
|||
Fifth, in-depth discussion of various DnD modes
Drag and drop methods include: drag and release within the page, drag and release between pages in the same domain, drag and release between pages in different domains, drag and release resources from the operating system to the page, drag and release elements from the page to the operating system or other programs.
IE5 ~ 9
| drag-and-drop | The default effect |
| Drag-and-drop release inside the page |
1. Drag the img and a[href] elements and the corresponding elements follow the mouse, but release the img and a[href] elements. 2. Drag selected text from input[type=text]/textarea and drop it on other input[type=text]/textarea elements. |
| Drag and drop between domain pages |
1. Dragging the IMG element and a[href] element redirects the page on which it is released to an image or hyperlink resource; 2. Drop selected text from input[type=text]/textarea and drop it on other input[type=text]/textarea elements. 3. Multiple pages share the dataTransfer object; 4. Dragging and dropping the IMG element automatically saves the image address to Text and URL format via setData. 5. Dragging and dropping a[href] element will automatically save the resource address to Text and URL format via setData 6. Dragging the selected text from input[type=text]/textarea will automatically save the text to text format via setData (URL format returns null). |
| Drag and drop between foreign pages |
1. The dataTransfer object is not shared. 2. Dragging the IMG element and the A [href] element redirects the page on which it is released to the image or hyperlink resource; 3. Drop selected text on input[type=text]/textarea and drop it on other input[type=text]/textarea elements. |
| Drag resources from the operating system to the page | The effect is consistent with drag-and-drop release between foreign pages |
| Drag and drop elements from the page to the operating system or other programs |
1. When you drag and drop img and a[href] elements, releasing them will save them as images and web files (depending on the browser security Settings, a secondary confirm window will pop up) 2. When you drag the selected text in the input[type=text]/ Textarea element and release it in a non-os text editor, the copy and paste operation will be performed. |
The condition of the Chrome
The effect and IE5~9 of the same, is more than the following points.
1. Drag a file resource from the operating system to the page. If the file resource is dragged and released on the input[type=file] element, the file path and other information will be automatically attached to the input[type=file] element.
2. Drag elements from the page to the operating system or other programs to release, except for the above three [draggable=true] elements, the default is draggable but cannot release. Datatransfer. setData can set effective URL format data, can be desktop and other places to release elements, and the effect is consistent with the release of hyperlinks; Datatransfer. setData can also be set to Text format data, then the element can be released in a non-OS built-in Text editor, the effect is the same as input[type= Text]/textarea element selected Text.
Examples of asymmetric drag and drop effects
For foreign page drag release, we give an example!
Page A:a.test.com, page B:b.test.com
Because two pages are foreign, the dataTransfer cannot be shared by default. Now pass document.domain=’test.com’; Modify the owning domain of page A. At this time, drag and drop from page A to page B, and the dataTransfer object will be shared. By dragging from page B to page A, the dataTransfer will not be shared.
Seven,
Due to the incomplete function of IE5~9 native DnD API, few people are willing to know about it, and relevant information is relatively difficult to find. The above contents are personal test results, if there is any mistake, welcome to correct, thank you!
Respect the original, reproduced please indicate from: www.cnblogs.com/fsjohnhuang… ^_^ fat John