Using HTML5 to realize drag and drop of pictures

Set elements to be dragged and dropped

First, to make an element draggable, set the Draggable property to True:

What to drag-ondragstart and SetData ()

Ondragstart drag starts as a trigger event, and what happens when the element is dragged. We name a function called drag (), and when the drag event is triggered, we execute the following function:

function drag (EV) {ev.dataTransfer.setData ("Text", ev.target.id);}
which
The Datatransfer.setdata () method sets the data type and value of the dragged data:

In this example, the data type is "Text" and the value is the ID of the draggable element.

Where to put it-ondragover

The OnDragOver event specifies where to place the dragged data.

By default, data/elements cannot be placed in other elements. If you need to set allow placement, we must block the default handling of elements.

This is done by invoking the event for OnDragOver events. Preventdefault () Method:

Event.preventdefault ();

To place-OnDrop

The drop event occurs when the dragged data is dropped. We define a drop function to execute this event;

function Drop (EV) {ev.preventdefault (); var data=ev.datatransfer.getdata ("Text"); Ev.target.appendChild ( document.getElementById (data));}

Call Preventdefault () to avoid browser default handling of data (the default behavior of the drop event is to open as a link)

The dragged data is obtained by means of the Datatransfer.getdata ("Text") method. The method returns any data that is set to the same type in the SetData () method.

The dragged data is the ID of the dragged element ("Drag1")

Appends the dragged element to the placement element (the target element).

The example code used for dragging is as follows:

<! DOCTYPE html>

Other methods:
-Drag in drag and drop
-Dragend drag and drop end
-DragEnter into the delivery area
-Move in DragOver area
-DragLeave leave the delivery area
-DataTransfer transfer data between different delivery areas

Using HTML5 to realize drag and drop of pictures