Home > Web Front-end > H5 Tutorial > body text

Detailed explanation of drag and drop events (Drag and drop) in HTML5

黄舟
Release: 2017-02-21 13:27:30
Original
1462 people have browsed it

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

<!DOCTYPE html>
<html> 
<head> 
<style type="text/css"> 
#p1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
</style> 
<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> 
 
<p>请把 Aseoe logo的图片拖放到矩形中:p> 
 
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">p> 
<br /> 
<img id="drag1" src="http://www.aseoe.com/statics/images/eoe/logo.png" 
draggable="true" ondragstart="drag(event)" /> 
 
</body> 
</html>
Copy after login



Set elements to be draggable

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

What to drag - ondragstart and setData()

Then, specify when What happens when an 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", the value is the id of the draggable element ("drag1").

Where to place - ondragover


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



placed - 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 avoid the browser's default processing of data (the default behavior of the drop event is to open it as a link)

Obtained through the dataTransfer.getData("Text") method The data being dragged. 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)

Summary

The above is a detailed explanation of the drag and drop events (Drag and drop) in HTML5. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Related labels:
source: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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template