English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Drag and drop is a common feature, which means dragging an object to another location after grabbing it. In HTML5 In, drag and drop is part of the standard, and any element can be dragged and dropped.
Drag and drop (Drag and Drop) is an HTML5 part of the standard.
Drag oldtoolbag.com icon drag it into the rectangular box.
Drag and drop is a common feature, which means dragging an object to another location after grabbing it.
In HTML5 In, drag and drop is part of the standard, and any element can be dragged and dropped.
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support drag and drop.
Note:Safari 5.1.2Does not support drag.
The following example is a simple drag and drop example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>
<p>Drag the3codebox.COM drag the image to the rectangular box:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/static/images/logo-n.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>Test to see ‹/›It may seem a bit complex, but we can study the different parts of the drag-and-drop events separately.
First, to make the element draggable, set the draggable attribute to true:
<img draggable="true">
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.
The dataTransfer.setData() method sets the data type and value of the dragged data:
function drag(ev)
{
ev.dataTransfer.setData("Text", ev.target.id);
}
Text is a DOMString that represents the type of drag-and-drop data to be added to the drag object. The value is the id of the draggable element ("drag1)。
The ondragover event specifies where to place the dragged data.
By default, data cannot be/An element is placed inside another element. If we need to set the element to be droppable, we must prevent the default handling of the element.
This is done by calling the event.preventDefault() method of the ondragover event:
event.preventDefault()
A drop event occurs when drag-and-drop data is placed.
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));
}
Code Explanation:
Call preventDefault() to avoid the browser's default handling of the data (the default behavior of the drop event is to open as a link)
Obtain 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 drop element (target element)
HTML5Drag and drop images back and forth
How to drag and drop an image between two <div> elements.