search

Home >Web Front-end >H5 Tutorial >HTML5 drag and drop (Drag and drop) examples explained

HTML5 drag and drop (Drag and drop) examples explained

零下一度
零下一度Original
2017-05-15 10:45:231552browse

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:

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>

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: 

<img draggable="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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML5 Inline SVG Tutorial and Differences from CanvasNext article：HTML5 Inline SVG Tutorial and Differences from Canvas

Related articles

See more