HTML5 Drag and Drop (Drag and Drop)

Drag and drop is a common feature where an object is grabbed and then dragged to another location.

In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.

example

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Self-selected course (such as about Zhihui.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 the picture into the rectangle:</p>
		<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<br />
		<img id="drag1" src="./image/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
	</body>
</html>

Setting elements can be dragged and dropped

First, to make the element draggable, set the draggable property 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 property calls a function, drag(event), which specifies the data being 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); 
   
}

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

where to put --ondrop

The drop event occurs when the dragged data is dropped.

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 browser default handling of data (default behavior of drop event is to open as link)
The dragged data is obtained through the dataTransfer.getData("Text") method. This method will return whatever data was 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)

Drag and drop pictures back and forth

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Self-selected course (such as about Zhihui.com)</title>
		<style type="text/css">
			#div1,#div2 {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 >
		<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<img id="drag1" src="./image/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
		<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
	</body>
</html>

HTML5 Drag and Drop (Drag and Drop)

Guess you like