HTML5 Drag and Drop: What do Drag and Drop mean? How to use it?-H5 Tutorial-php.cn

HTML5 Drag and Drop: What do Drag and Drop mean? How to use it?

寻∝梦

Release： 2018-08-13 19:11:34

Original

2792 people have browsed it

HTML5 is so popular now, let’s get to know these new elements. This article mainly teaches you what HTML5 drag-and-drop elements are and how to use them.

What does drag and drop mean in HTML5?

Drag-and-drop is a common feature where you grab an object and then drag it to another location. , the purpose of drag and drop is to allow you to place an object where you want to place it. In HTML5, drag and drop is part of the standard and any element can be dragged and dropped.

What do Drag and Drop mean?

#darg: The event body is the dragged element and is triggered when the dragged element is being dragged and dropped.

drop: The event body is the target element, which is triggered when the target element completely accepts the dragged and dropped element.

Browser support

Internet Explorer Firefox Opera Google Chrome Safari

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

Note: Safari 5.1.2 does not support dragging.

HTML5 drag and drop usage example

The following example is a simple drag and drop example ：

Here are examples:

<!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.

Detailed steps for drag and drop event execution:

1. Set the element to be 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 will happen 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").

Tip: You can learn more useful information in the "ondragstart event" section of this site!

2. 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()

3. Place - 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 processing (the default behavior of the drop event 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"), and the dragged element is appended to the placed element (target element).

[Related recommendations]

The basic elements of html, allowing you to learn HTML from scratch

The development of HTML and HTML5 history

The above is the detailed content of HTML5 Drag and Drop: What do Drag and Drop mean? How to use it?. For more information, please follow other related articles on the PHP Chinese website!