Method/Step
1
DataTransfer object: The object to be pulled back, generally using Event.datatransfer.
The Draggable property, which sets the value of the label element to True. Drangable=true.
Ondragstart Event: An event triggered when an element is dragged, acting on a dragged element.
OnDragEnter event: Enters the target element to trigger the event, acting on the target element.
OnDragOver Event: An event triggered when a drag element moves on a target element, acting on the target element.
OnDrop event: The dragged element on the target element while the mouse releases the triggered event, acting on the target element.
Ondragend event: Triggers the event after a drag is completed, acting on the dragged element.
Event.preventdefault () Method: Prevents the default method from executing. Preventdefault () must be executed in the OnDragOver, otherwise the OnDrop event will not be triggered.
Event.effectallowed Properties: Drag-and-drop effect.
Set the element to be drag-and-drop, and the Draggable property is set to true.
The Datatransfer.setdata () method sets the data type and value to be dragged:
function drag (EV) {
Ev.dataTransfer.setData ("Text", ev.target.id);
}
Drag (event) declares a method that specifies the data to be dragged, the type is "text", and the value is a draggable element ID to get.
Be sure to define Event.preventdefault () to block the default action.
function Drop (EV) {
Ev.preventdefault ();
var data=ev.datatransfer.getdata ("text");
Ev.target.appendChild (document.getelementbyidx_x (data));
}
HTML5 new drag and drop feature description: