HTML5 drag and drop (Drag and drop) examples explained

Drag and drop are part of the HTML5 standard.

Drag and drop

Drag and drop is a common feature where you grab an object and then drag it to another location.

In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.

Browser support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support dragging.

Note: Safari 5.1.2 does not support dragging.

HTML5 drag and drop example

The following example is a simple drag and drop example:

It may look a bit complicated, but we can study different parts of the drag and drop event separately.

Set the element as draggable

First, in order to make the element draggable, set the draggable attribute to true:

What to drag - ondragstart and setData()

Then, specify what happens when the element is dragged.

In the above example, the ondragstart attribute calls a function, drag(event), which specifies the data to be dragged.

dataTransfer.setData() method sets the data type and value of the dragged data:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

[Related recommendations]

1. Special recommendation: "php Programmer Toolbox" V0.1 version download

2. Free h5 online video tutorial

3. php.cn original html5 video tutorial

The above is the detailed content of HTML5 drag and drop (Drag and drop) examples explained. For more information, please follow other related articles on the PHP Chinese website!