Summary of HTML5 element drag and drop settings

Put the element picture inside the div box

1. First set the element to be drag and drop: Add draggable= "true" to the IMG tag.

2. Set the drag of the element: Call a function drag (EV) in the IMG tag with the ondragstart attribute, which sets the data type and value of the dragged data using the Datatransfer.setdata () method.

function drag (EV) {

Ev.dataTansfer.setData ("text", ev.target.id)//data type is Text, the value is the ID of the draggable element ("Drag1").

}

3. Where to put-ondragover

Use OnDragOver in the placed Div to specify the allowed settings for the setting, because the default cannot put data/elements into other elements, and if you need to allow placement, you must prevent the default handling of the element.

At this time, a function alloedrop (EV) is called with OnDragOver, and the function internally specifies that the Event.preventdefault () method is used to block the default handling of the element.

<div ondragover= "AllowDrop (event)" ></div>

function AllowDrop (EV) {

Ev.prentdefault ();

}

4, the following is placed-ondrop

Set the ondrop= drop (EV) function in the placed Div, which specifies the placement procedure.

<div ondrop= "Drop (event)" ></div>

Function Drop (EV) {

Ev.preventdefault ();//used to avoid browser's default handling of data

• var data=ev.datatransfer.getdata ("text"), or//Datatransfer.getdata ("text") method to obtain the dragged data. The method returns any data that is set to the same type in the SetData () method.

Ev.target.appendChild (data);//The dragged element is the ID ("DRAG1") of the dragged element, appended to the drop element (the target element).

}

Summary of HTML5 element drag and drop settings