HTML5 drag and drop (Drag and drop) examples explained-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 drag and drop (Drag and drop) examples explained

零下一度

May 15, 2017 am 10:45 AM

Tutorial

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>

Copy after login

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">

Copy after login

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);
}

Copy after login

[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 of this Website

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