How to make Drag and Drop in HTML 5 and JavaScript API

ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY

Publish perfectly-optimized content in 1-click




How to make Drag and Drop in HTML 5 and JavaScript API

In HTML 5 we can make almost any element on our page draggable.


First we create draggable content

In most browsers, text selections, images, and links are draggable by default, for example, if you drag a link on a web
page you will see a small box with a title and URL, you can drop this box on the address bar or the desktop to create
a shortcut or to navigate to the link.

To make other types of content draggable you need to use the HTML5 Drag and Drop APIs.

The property draggable if set to true make an object draggable.
Anything can be drag-enabled: images, files, links, files , or any markup on your page.

The following example that I will show you , allows you to drag and dropo dzosoft logo or the text from div to another

Download this example


Step 1

We need to six elements (div) with the same style, for example the 'box' style declared (CSS) in the following window:

<!DOCTYPE html>
<html>
<head>
	<style>
		.box {
		  border: 1px solid #666;
		  background-color: #fff;
		  border-radius: .9em;
		  padding: 1px;
		  cursor: move;
		  width: 200px;
		  height: 200px;
		  display: flex; 
		  align-items: center;
		  justify-content: center;
		}


		.box.over {
		  border: 3px dotted #666;
		}
	</style>
</head>
<body>
	<table>
	  <tr>
	  <td>
		  <div draggable="true" class="box">
			<img src="https://www.dzosoft.com/image/dzosoft_1.jpg"/>
		  </div>
	  </td>
	  <td>
		  <div draggable="true" class="box">
		  </div>
	  </td>
	  <td>
		  <div draggable="true" class="box">
			www.DZOSOFT.com
		  </div>
	  </td>
	 </tr>
	 <tr>
	  <td>
		<div draggable="true" class="box">
 		 <img src="https://www.dzosoft.com/image/dzosoft_2.jpg"/>
		</div>
	  <td>
		<div draggable="true" class="box">
		</div>
	  </td>
	  <td>
		<div draggable="true" class="box">
 		 <img src="https://www.dzosoft.com/image/dzosoft_3.jpg"/>
		</div>
	  </td>
	 </tr> 
	</table> 
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<style>
		.box {
		  border: 1px solid #666;
		  background-color: #fff;
		  border-radius: .9em;
		  padding: 1px;
		  cursor: move;
		  width: 200px;
		  height: 200px;
		  display: flex; 
		  align-items: center;
		  justify-content: center;
		}
</br>
		.box.over {
		  border: 3px dotted #666;
		}
	</style>
</head>
<body>
	<table>
	  <tr>
	  <td>
		  <div draggable="true" class="box">
			<img src="https://www.dzosoft.com/image/dzosoft_1.jpg"/>
		  </div>
	  </td>
	  <td>
		  <div draggable="true" class="box">
		  </div>
	  </td>
	  <td>
		  <div draggable="true" class="box">
			www.DZOSOFT.com
		  </div>
	  </td>
	 </tr>
	 <tr>
	  <td>
		<div draggable="true" class="box">
 		 <img src="https://www.dzosoft.com/image/dzosoft_2.jpg"/>
		</div>
	  <td>
		<div draggable="true" class="box">
		</div>
	  </td>
	  <td>
		<div draggable="true" class="box">
 		 <img src="https://www.dzosoft.com/image/dzosoft_3.jpg"/>
		</div>
	  </td>
	 </tr> 
	</table> 
</body>
</html>


We put the dzosoft logo with different colors in three elements and the text in another element.
At this point you will find that you can drag the items, however nothing else will happen.


Step 2

To add the drag and drop functionality we need to use the JavaScript API.


Listening for dragging events

There are a number of different events to attach to for monitoring the entire drag and drop process.

dragstart
drag
dragenter
dragleave
dragover
drop
dragend

To handle the drag and drop flow, you need some kind of source element and a target (an area to catch the drop).
The source element can be an image, list, link, file object, block of HTML, etc.
( Not all elements can be targets, for example an image can't be a target).


Starting and ending a drag and drop


Now we attach all the events handler to kick off the drag and drop sequence for each element.



  document.addEventListener('DOMContentLoaded', (event) => {


  function handleDragStart(e) {  //Drag Start
    dragSrcEl = this;


	e.dataTransfer.effectAllowed = 'move';
	e.dataTransfer.setData('text/html', this.innerHTML);
  }


  function handleDragEnd(e) {  //Drag End


    items.forEach(function (item) {
      item.classList.remove('over');
    });
  }


  function handleDragOver(e) {  //Drag Over
    e.preventDefault();
    return false;
  }


  function handleDragEnter(e) {   //Drag Enter
    this.classList.add('over');
  }


  function handleDragLeave(e) {    //Drag leave
    this.classList.remove('over');
  }


  function handleDrop(e) {          //Drop Start   
   e.stopPropagation();
  if (dragSrcEl !== this) {
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
  }


  return false;
}


  //Here we add all events to each elements with the style 'box'
  let items = document.querySelectorAll('.box'); 


  items.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart);
    item.addEventListener('dragover', handleDragOver);
    item.addEventListener('dragenter', handleDragEnter);
    item.addEventListener('dragleave', handleDragLeave);
    item.addEventListener('dragend', handleDragEnd);
    item.addEventListener('drop', handleDrop);
  });
});
</script>

</br>
  document.addEventListener('DOMContentLoaded', (event) => {
</br>
  function handleDragStart(e) {  <font color="white">//Drag Start</font>
    dragSrcEl = this;
</br>
	e.dataTransfer.effectAllowed = 'move';
	e.dataTransfer.setData('text/html', this.innerHTML);
  }
</br>
  function handleDragEnd(e) {  <font color="white">//Drag End</font>
</br>
    items.forEach(function (item) {
      item.classList.remove('over');
    });
  }
</br>
  function handleDragOver(e) {  <font color="white">//Drag Over</font>
    e.preventDefault();
    return false;
  }
</br>
  function handleDragEnter(e) {   <font color="white">//Drag Enter</font>
    this.classList.add('over');
  }
</br>
  function handleDragLeave(e) {    <font color="white">//Drag leave</font>
    this.classList.remove('over');
  }
</br>
  function handleDrop(e) {          <font color="white">//Drop Start</font>   
   e.stopPropagation();
  if (dragSrcEl !== this) {
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
  }
</br>
  return false;
}
</br>
  <font color="white">//Here we add all events to each elements with the style 'box'</font>
  let items = document.querySelectorAll('.box'); 
</br>
  items.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart);
    item.addEventListener('dragover', handleDragOver);
    item.addEventListener('dragenter', handleDragEnter);
    item.addEventListener('dragleave', handleDragLeave);
    item.addEventListener('dragend', handleDragEnd);
    item.addEventListener('drop', handleDrop);
  });
});
</script>