HTML5 drag and drop
Drag and drop is a common feature of grabbing an object and then dragging it to another location.
In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.
Drag and drop are part of the HTML5 standard.
Browser support
HTML5 drag and drop example
The following The example is a simple drag-and-drop instance:<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
#div1 {width:300px;height:200px;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>拖动 W3CSchool.cc 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="http://img1.ph.126.net/MnyJ0KB2x0x5uxhOnXJtNA==/3337730273835664288.gif" draggable="true" ondragstart="drag(event)" width="300" height="200">
</body>
</html>Run the program and try to drag the imageThe program may look a bit complicated, but we can study different parts of the drag-and-drop event separately. .
Set the element to be draggable
First, in order to make the element draggable, set the draggable attribute to true:<img draggable="true">
##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);
}
In this example, the data type is "Text" and the value is the id of the draggable element ( "drag1").
Where to put it - 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()
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));
}
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)
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 placement element (target element) Medium
Example
##How to drag between two <div> elements Put the image.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
#div1, #div2
{float:left; width:200px; height:205px; margin:10px;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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="http://img1.ph.126.net/MnyJ0KB2x0x5uxhOnXJtNA==/3337730273835664288.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="190" height="190"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>Run the program and try it
