HTML5 drag and drop (Drag and drop) function development--talking about DataTransfer object

[Preface] I have already introduced an article about the HTML5 of the central Plains students of the relevant knowledge. Today we will introduce some other knowledge and applications about DataTransfer objects in HTML5 drag and drop.

DataTransfer Object

A previous article also mentions the DataTransfer object, which simply wants to pass the ID of the dragged element through the DataTransfer object, allowing the target element to obtain an ID for the corresponding operation through the corresponding DataTransfer object.

Member table

Properties	Description
DropEffect	Sets or gets the type of drag operation and the type of cursor to display.
Effectallowed	Sets or gets the source element that the data transfer operation can apply to the object.

Method	Description
ClearData (Sformat)	Removes one or more data formats from the Clipboard through the datatransfer object.
GetData (Sformat)	Gets the data in the specified format from the Clipboard through the datatransfer object.
SetData (Sformat,sdata)	Assigns data to the DataTransfer object in the specified format. Sformat:url, Text
Setdragimge (element, x, y)	Element: Specifies an object that appears below the cursor when the drag occurs. X:x axis offset. Y:y axis offset.

Property

This two properties for the first contact with DND friends, is the most confusing, on the internet and the books on these two attributes are not comprehensive interpretation, below I try to make it clear.

The main function of effectallowed and DropEffect is to configure the type of the mouse pointer during a drag operation to prompt the user for subsequent actions, and the next function is to control whether the drop event is triggered or not.

DropEffect

Function: Used to set the action that the target element will perform, and if the attribute value falls within the effectallowed range, the mouse pointer will display the corresponding pointer style, otherwise the prohibited pointer style is displayed.

Range of values:

Copy: The dragged element is copied to the target element, and if it falls within the effectallowed range, the mouse pointer displays the copied style, otherwise the prohibited pointer style is displayed.

Link: The dragged element opens the resource as a hyperlink, and if it falls within the effectallowed range, the mouse pointer displays the style of the hyperlink, otherwise the prohibited pointer style is displayed.

Move: The dragged element is moved to the target element, and if it falls within the effectallowed range, the mouse pointer displays the moved style, otherwise the prohibited pointer style is displayed.

None: The dragged element cannot do anything on the target element, and always displays the forbidden pointer style. None of the default values for other elements except text boxes

Attention:

1. The property value can only be set in the DragOver event, and the settings in other events are not valid

2. When a prohibited pointer style is displayed, the drop event of the target element cannot be triggered.

Effectallowed

Function: Used to set the action that the dragged element can perform.

Range of values:

Copy, limit DropEffect property value to copy, otherwise the mouse pointer is a forbidden style

Link, limit dropeffect property value to link, otherwise the mouse pointer is a forbidden style

Move, limit the property value of DropEffect to move, otherwise the mouse pointer is a forbidden style

Copylink, DropEffect attribute values are copy and link, otherwise the mouse pointer is a forbidden style

Copymove, the attribute value of the dropeffect is copy and move, otherwise the mouse pointer is a forbidden style

Linkmove, the attribute value of DropEffect is link and move, otherwise the mouse pointer is a forbidden style

All, allows the DropEffect property value to be any value

None, the mouse pointer is always a forbidden style, regardless of the DropEffect property value

Uninitialized, the value of the DropEffect property is not qualified, and the effect is the same as all.

Note: This property can only be set in the DragStart event, and the settings in other events are not valid.

 Summary

Currently only write a list of new properties, follow-up pit.

HTML5 drag and drop (Drag and drop) function development--talking about DataTransfer object