Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of dataTransfer objects in HTML5. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Data transfer of HTML5 drag and drop

Although native dragging is implemented through dragstart, drag, and dragend events. But this is just drag-and-drop, there are still some drag-and-drop problems in IE6 and IE7, and there is no data exchange. In order to exchange data, IE5 introduces dataTransfer object. The dataTransfer object is an attribute of the event object that is used to pass string-formatted data from the drop target of the dragged element. Because it is a property of the event object, the dataTransfer object can only be accessed in the event handler of the drag-and-drop event. In the event handler, you can use the properties and methods of this object to improve drag-and-drop functionality.

The dataTransfer object has two main methods: the getData () method and the setData () method. The uses of these two methods can be roughly guessed from the literal meaning of these two methods. The getData () method can get the value saved by the setData () method. The first parameter of the setData () method, and the only parameter of the getData () method, is the string used to hold the data type, with a value of "text" or "URL".

IE defines only two valid data types, "text" or "URL", while HTML5 extends this to allow various MIME types to be specified. HTML5 also supports "text" or "URL" for backward compatibility, but these two types are mapped to "text/plain" or "text/url-list".

In fact, the dataTransfer object can hold a value for each MIME type. This means that colleagues won't have any other problems saving a piece of text and a URL in this object. However, data saved in a dataTransfer object can only be read in a drop event handler. If the data is not read in the ondrop processor, the dataTransfer object has been destroyed and the data is lost.

When you drag text in a text box, the browser calls the setData () method to save the dragged text in the dataTransfer object in "text" format. Similarly, when you drag and drop a link or image, the setData () method is called and the URL is saved. The data can then be read through the getData () method when the elements are dragged and dropped to the drop target. Of course, as a developer, you can also manually save the data you want to transfer by calling setData () in the dragstart event handler for future use.

There is a difference between saving data in text and saving it as URL. If you save the data in text format, the data will not receive any special processing. If you save it in URL format, the browser treats it as a link in a web page. If you place the URL in another browser window, you can open the URL.

Firefox 5 and previous versions cannot map "url" and "text" to "" and "text/plain". But you can map "Text" (T capital) to "text/plain". To better get data from dataTransfer objects across browsers, it's best to detect two values when getting URL data and use "Text" when getting text data.

Note that it is important to put short data types first, because IE10 and previous versions still do not support extended MIME type names, and they report errors when they encounter unrecognized data types. However, only IE is mandatory for "text" or "URL" values, and strings that set other arbitrary values in Firefox 3.6 +, Chrome, and Opera work fine.

DropEffect property and effectAllowed property

Using the dataTransfer object, you can not only transfer data, but also use the dataTransfer object to determine what operations can be received by the dragged element and the element that is the target of the drop. To achieve this function, the dropEffect property and the effectAllowed property are used.

DropEffect attribute

Where you can know what kind of behavior the dragged element can perform through the dropEffect attribute. The four values of this property are as follows

None: you can't put dragged elements here. This is the default value for all elements except the text box.

Move: you should move the dragged element to the placement target.

Copy: you should copy the dragged element to the drop target.

Link: placing the target opens the dragged element (but the dragged element must be a link with a URL address).

When you drag an element to the placement target, each of the above values causes the cursor to display as a different symbol.

EffectAllowed attribute

Having the dropEffect attribute alone doesn't work. It works only when used in conjunction with the effectAllowed attribute. The effectAllowed attribute indicates which behavior (dropEffect) of the element is allowed to be dragged. The effectAllowed property also has many values, which are as follows:

Uninitialized: no placement behavior is set for the dragged element.

None: the dragged element cannot have any behavior.

Copy: only dropEffect with the value "copy" is allowed.

Link: only dropEffect with the value "link" is allowed.

Move: only dropEffect with the value "move" is allowed.

CopyLink: dropEffect with allowed values of "copy" and "link".

CopyMove: dropEffect with allowed values of "copy" and "move".

LinkMove: dropEffect with allowed values of "link" and "move".

All: arbitrary dropEffect is allowed.

To set the effectAllowed property, you must set it in the ondragstart event handler. A few examples are as follows

HTML code

[html] view plaincopyprint?

Menglong small station

CSS code

[css] view plaincopyprint?li {width:100px; height:30px; border:1px # 000000 solid; margin:20px; list-style:none;} # p1 {width:100px; height:100px; background:red; margin:300px;}

JavaScript code

[javascript] view plaincopyprint?//dataTransfer object: connecting drag details, / / dragging li without a link under the event object will work, but will not jump the link / / drag a with the connection, it will also jump _ window.onload = function () {var aLi = document.getElementsByTagName ('li'); var aA = document.getElementsByTagName (' a'); var op = document.getElementById ('p1') For (var iTuno Bandi)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.