Drag Drop vanilla JS

Can someone please explain to me with comments, line by line the following methods used in this program and exactly how it works.

<!DOCTYPE HTML> 
<html> 
<head>
<title>HTML5 Drag and Drop</title> 
<style>
body {
background-color: #ddd; 
font-family: arial, verdana, sans-serif;
}
#drop1 {
width: 200px; 
height: 200px; 
border: 1px solid black; 
background-color: white;
}
#drag1 {
width: 50px; 
height: 50px; 
} 
</style> 
<script>
function allowDrop (ev) {
  ev.preventDefault();
}
//normally elements dont allow drop so this prevents the default of preventing drop
function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id) ;
}
//sets a data transfer property? what is going on in here?
function drop (ev) {
  var data = ev.dataTransfer.getData("Text"); 
  ev.target.appendChild(document.getElementById(data)); 
  ev.preventDefault();
}
window.onload = function() {
  var dragged = document.getElementById("drag1"); 
  var drophere = document.getElementById("drop1"); 
  dragged.ondragstart = drag; 
  drophere.ondragover = allowDrop; 
  drophere.ondrop = drop;
}
</script> 
</head> 
<body>
<div id="drop1"></div> 
<p>Drag the image below into the box above: </p>
<img id="drag1" src="drag.png" draggable="true" /> 
</body> 
</html>

Can you indent the code to make it more readable? Also, why not just tell us which lines you do not understand? There is no sense in explaining a line you already understand.

Thank you for indenting. Now I can see!:grinning:

what does ev represent?
what is ‘Text’? what is ev.target.id?
what is the diff between .setData and .getData?
what is happening in the onload function?

I have not used these methods before, so I would have to read up about it and get back with you. Did you try the MDN documentation for these methods?

As per what I understand from code, article is binding events on dragging and dropping on pageload (window.onLoad) function is called on page.

Let’s understand it line by line

As soon as page is loaded - > window.onload JS function is called

Which picks element to be dragged and element where we need to drop

  var dragged = document.getElementById("drag1"); 
  var drophere = document.getElementById("drop1"); 

When we are done, move forward

//this is called to start dragging element
  dragged.ondragstart = drag; 

//binding function on dragover and ondrop
  drophere.ondragover = allowDrop; 
  drophere.ondrop = drop;

suppose you started dragging element from “img” into “div” with id=“drop1”
then

//this function is called to get the data of element which you are dragging
function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id) ;
}

Once you will move to “div”

//this function is called to allow dropping element inside div
function allowDrop (ev) {
  ev.preventDefault();
}

and in the end, we drop image in “div”, using below

//this function basically sets , the html inside div for image to be shown (element which you dropped)
function drop (ev) {
  //get current data
  var data = ev.dataTransfer.getData("Text"); 
 //appendChild element as image to div (parent)
  ev.target.appendChild(document.getElementById(data)); 
//that's it you are done
  ev.preventDefault();
}

If you are still confused, I will recommend you reading below article

Implementing Javascript Drag and Drop using HTML5

Thank you, that’s a good reply, but this thread is 2 years old