HTML5 Tutorial - Drag and Drop-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

HTML5 Tutorial - Drag and Drop

黄舟

Dec 27, 2016 pm 03:24 PM

html drag and drop

Hi, front-end programmers, hello! I am very happy to explain to you a series of knowledge about HTML5 tutorials. This article mainly introduces HTML5 drag and drop events. Drag and drop is a common feature of HTML5.

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 12, Chrome and Safari 5 support drag and drop.

Note: Drag and drop is not supported in Safari 5.1.2.

HTML5 drag and drop example

The following example is a simple drag and drop example:

The code is as follows:

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
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 little 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

In this example, the data type is "Text" and the value is the id of the draggable element ( "drag1").

Where to put it - ondragover

The ondragover event specifies where to place the dragged data.

By default, data/elements cannot be placed into other elements. If we need to allow placement, we must prevent the default handling of the element.

This is done by calling the event.preventDefault() method of the ondragover event:

event.preventDefault()

Copy after login

Placement - ondrop

When the dragged data is placed, the drop event will occur.

In the above example, the ondrop attribute calls a function, drop(event):

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
}

Copy after login

Code explanation:

Call preventDefault() to prevent the browser from modifying the data The default handling of drop events (the default behavior of drop events is to open as a link).

Get the dragged data through the dataTransfer.getData("Text") method. This method will return any data set to the same type in the setData() method.

The dragged data is the id of the dragged element (“drag1″).

Append the dragged element to the placed element (target element).

The above is the content of HTML5 tutorial-drag and drop. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

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