Introduction of drag drag and drop function in HTML5

Drag-and-drop (Drag and Drop) is part of the HTML5 standard, this article mainly introduces the object and event information related to drag and drop operation.
To accept the drop of an element, the target element must listen for at least 3 events:
The first is the DragEnter event, which determines whether or not to accept that the "dragged element" is dropped and, if accepted, the event is canceled to the next event
The DragOver event is then used to determine what feedback is given to the user, that is, what effect is rendered on top of the element, if the event is canceled, the feedback is generally a mouse pointer, or the DropEffect property definition, if the event is not canceled, then the default behavior, The default behavior is generally not doing anything.
The last is the drop event, which is the drop action that is actually going to be performed, and the event needs to be canceled so that the DropEffect property setting can be used.
A simple example
In HTML5 to implement drag-and-drop operations, compared with the previous implementation of the mouse, it is much simpler, data security is also more secure. Only the following steps are required.
Add the Draggable attribute to the dragged element, if it is a file drag and drop.
Adding a Dropzone attribute to the target element is not necessary and can be omitted.
Initializes the related data information in the dragstart of the dragged element, mainly the DataTransfer object.
In the DragOver event for the target element, cancel its default action.
In the drop event for the target element, process the received data.
In the Dragend incident of the dragged element, do the remedial work. If not, you can omit it.
The approximate code is as follows:

<div id= "source" draggable= "draggable" >source</div>

<div id= "Target" >target</div>

<script type= "Text/javascript" >

var target = document.getElementById (' target ');

var Source = document.getElementById (' source ');

Source.ondragstart = function (e) {

e.datatransfer.effectallowed = ' Copymove ';

E.datatransfer.setdata (' Test ', ' testData ');

};

Target.ondragover = function (e) {

E.datatransfer.dropeffect = ' move ';

E.preventdefault (); Not less

};

Target.ondrop = function (e) {

var elem = document.createelement (' a ');

elem.innerhtml = e.datatransfer.getdata (' test ');

E.target.appendchild (Elem);

};

</script>

Draggable Property
Draggable is an enumeration property that specifies whether a label can be dragged. The following four values are available:
True: Indicates that this element can be dragged.
False: This element cannot be dragged.
Auto: Except for the IMG and the label a tag with href that can be dragged and dragged, other labels are not towed.
Any other value: means not to drag.
Dropzone Property
This property is used to accept the target element of the drag element, representing the acceptable data type and operation mode. Multiple values are separated by spaces and are not case-sensitive. The values are composed of the following types:
Copy: Indicates that the dragged data is copied to the target element when the allowed elements are placed on the element.
Link: Represents the linking of data to the target element when the allowed elements are placed on the element.
Move: Indicates that when the allowed elements are placed on the element, the data is moved to the target element.
A string that begins with "string:" that cannot be less than 8 characters: a data object that can accept the Datatransferitem.kind value as "string".
A string that begins with "file:" cannot be less than 6 characters: represents a value that can accept the Datatransferitem.kind value of "file" and Datatransferitem.type match "file:" The Datatransferitem of the character after the object.
Browser support
Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop.
Note: Drag-and-drop is not supported in Safari 5.1.2.
Related events
Dragevent Interface Definition
The Dragevent is inherited from the MouseEvent interface and is defined as follows, and is just a DataTransfer object compared to MouseEvent. All actions for drag-and-drop are also done by controlling this object.

[Construct (domstring type, optional drageventinit eventinitdict)]

Interface Dragevent:mouseevent

{

ReadOnly attribute DataTransfer? DataTransfer;

};

/* This is the parameter definition for the initial event * *

Dictionary Drageventinit:eventinit

{

Properties inherited from Uievent:

Window? view = null;

Long detail = 0;

Properties inherited from MouseEvent:

Long ScreenX = 0;

Long ScreenY = 0;

Long ClientX = 0;

Long ClientY = 0;

Boolean ctrlkey = false;

Boolean shiftkey = false;

Boolean altkey = false;

Boolean metakey = false;

unsigned short button = 0;

unsigned short buttons = 0;

Eventtarget? Relatedtarget = null;

New properties added by Dragevent:

DataTransfer? DataTransfer;

}

Event description
Event name event target can be undone? Storage mode DropEffect value Default action Note
DragStart dragged element is read, write <q>none</q> initialize operation if the Preventdefault () function is invoked to cancel the default behavior of this event, the drag-and-drop function is canceled.
Drag drag element is protected mode <q>none</q> after DragStart, the event is triggered until the mouse is released, regardless of whether or not the mouse is moving.
The DragEnter target element is a protected mode effectallowed qualified value. Replace the target element. When you enter the target element, it fires once.
DragLeave the target element before leaving is protected mode <q>none</q> is triggered once when leaving.
The DragOver target element is the protected mode effectallowed qualified value reset DropEffect to <q>none</q&gt, and the subsequent event execution is interrupted. After DragEnter, this event will be triggered continuously, regardless of whether or not the DragLeave is moved.
The drop target element is a value that is currently set in read-only mode and is triggered by the target element after the mouse is released.
Dragend is dragged by the element no protection mode is currently set to release the mouse, triggered by the dragged element, in order after drop.
The target element is the element that the current mouse stays in, such as dragging a element onto the F element, all the elements that pass through the middle, a target element during the mouse pass, and the corresponding event is triggered, and the a element itself is the first target.
DataTransfer interface
In HTML5, in order to realize the data exchange during the drag-and-drop process, a DataTransfer property is provided for all drag-and-drop events. Use this object's methods and properties to refine the drag-and-drop functionality.

Interface DataTransfer

{

Attribute domstring DropEffect;

Attribute domstring effectallowed;

void Setdragimage (Element image, long x, long y);

ReadOnly attribute domstring[] types;

Domstring getData (domstring format);

void SetData (domstring format, domstring data);

void ClearData (optional domstring format);

readonly attribute datatransferitemlist items;

readonly attribute filelist files;

}

The

effectallowed and DropEffect
properties are used to describe the style that the mouse displays during the drag and drop, and is affected by the browser and the operating system, and the icons displayed by the mouse are inconsistent.
Effectallowed represents the mouse style that is allowed to display this time, and can be the following values: "None", "Copy", "Copylink", "copymove", "link", "Linkmove", "Move", "All" and " Uninitialized ". This value can only be changed in the DragStart event. The
DropEffect represents the styles displayed during this drag-and-drop process, which can be the following values: Copy, move, link, and none. In the specific drag-and-drop process, also subject to the effectallowed value limit, the specific content see the table below, when the value of DropEffect is set to a value that is not effectallowed qualified, the entire chain of events will be aborted,