Comment: Before HTML5, to implement drag and drop operations of web page elements, it was necessary to rely on mousedown, mousemove, mouseup and other APIs to implement them through a large amount of JS code. Now html5 greatly simplifies the difficulty of drag and drop operations of web page elements. In addition to supporting drag and drop of elements inside the browser, the API also supports dragging data between the browser and other applications.
Before HTML5, to implement drag and drop operations of web page elements, we need to rely on mousedown, mousemove, mouseup and other APIs to implement them through a large amount of JS code; HTML5 introduces an API that directly supports drag and drop operations, which greatly simplifies the difficulty of programming drag and drop operations of web page elements. In addition to supporting drag and drop of elements inside the browser, these APIs also support data dragging between the browser and other applications.
This article uses a simple example to demonstrate how to use drag and drop APIs in HTML5.
Scene:
As shown in the figure below, we want to implement:
Drag the photo from the left album area to the right trash can area by dragging and dropping; during the dragging process, the warm reminder part should be promptly reminded, and the drag and drop operation is currently being carried out;
Implementation method:
As shown in the above interface, the HTML code is relatively simple, as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 implements drag and drop operation</title>
<meta charset="utf-8"/>
<style>
.album
{
border: 3px dashed #ccc;
float: left;
margin: 10px;
min-height: 100px;
padding: 10px;
width: 220px;
}
</style>
</head>
<body">
<div>
<h2>Warm reminder: You can drag the photos directly into the trash can</h2>
</div>
<div>
<h2>Album</h2>
<img draggable="true" src="img/bg_01.png" />
<img draggable="true" src="img/bg_02.png" />
<img draggable="true" src="img/bg_03.png" />
</div>
<div>
<h2>Trash can</h2>
</div>
<br/>
</body>
</html>
Note: If you want to implement drag and drop operations, you need to add draggable=true attribute to the elements to be dragged and dropped;
Next, add the following JS code to the onload event. The comments are more detailed and will not be explained separately.
<script>
function init(){
var info = document.getElementById("info");
//Get drag and drop elements, this example is the DIV where the album is located.
var src = document.getElementById("album");
//Start drag and drop operation
src.ondragstart = function (e) {
//Get the drag-and-drop photo ID
var dragImgId = e.target.id;
//Get dragged element
var dragImg = document.getElementById(dragImgId);
//The drag and drop operation ends
dragImg.ondragend = function(e){
//Recover the reminder message
info.innerHTML="<h2>Creative reminder: You can drag the photos directly into the trash can</h2>";
};
e.dataTransfer.setData("text",dragImgId);
};
//Drag and drop process
src.ondrag = function(e){
info.innerHTML="<h2>--Photo is being dragged-</h2>";
}
//Get drag and drop target element
var target = document.getElementById("trash");
//Close the default processing;
target.ondragenter = function(e){
e.preventDefault();
}
target.ondragover = function(e){
e.preventDefault();
}
// Something drags and drops to the target element
target.ondrop = function (e) {
var draggedID = e.dataTransfer.getData("text");
//Get the DOM object in the album
var oldElem = document.getElementById(draggedID);
//Delete the node of the photo from the album DIV
oldElem.parentNode.removeChild(oldElem);
//Add the dragged photo DOM node to the trash DIV;
target.appendChild(oldElem);
info.innerHTML="<h2>Creative reminder: You can drag the photos directly into the trash can</h2>";
e.preventDefault();
}
}
</script>
Realize the effect: