HTML5 new drag and drop feature description:

Method/Step

1. 1

DataTransfer object: The object to be pulled back, generally using Event.datatransfer.

• 2

The Draggable property, which sets the value of the label element to True. Drangable=true.

• 3

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.

• Drag an element using the Ondragstart event. SetData () sets the Get element.

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.

• Drag-and-drop into the target Ondragover,ondragover event to specify where to place the dragged data.

Be sure to define Event.preventdefault () to block the default action.

• To place a drop event occurs when the OnDrop data is placed.

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: