How to implement drag and drop in HTML5?

Dragging and dropping content in your html document got easier with HTML5.

You just need to mark the element you want to drag as “draggable”, drag it and drop it using some simple javascript.

Here are the steps:

STEP1: Mark the HTML element to drag as draggable

STEP2: Write a javascript function for the event ondragstart

STEP3: Write a javascript function for the event ondragover

STEP4: Write a javascript function for the event ondrop

STEP5: Call the above javascript functions on the respective actions.

Here is the implementation in detail.

Consider the below list of technologies which you want to drag and drop in your favorites list:

You want to drag an item from the list of technologies and drop on the text “My Favourites” .

Here is the HTML code for the above :

<!DOCTYPE HTML>
<html>
<head>

<style>
li {
  border: 1px solid black;
  background-color: yellow;
  width: 100px;
}
<style>

</head>
<body>

<h1>Pick your favourite technology</h1> 

<ul >
<lh><strong>Technologies</strong></lh>
<li  id="Java">Java </li>
<li  id="Angular">Angular </li>
<li  id="HTML"> HTML</li>
<li  id="CSS"> CSS</li>
<li  id="Javascript"> Javascript</li>
</ul>

<h1>Drop them on the below text</h1>

<ul >
<lh>My Favourites</lh>
</ul>


</body>
</html>

Just two unordered lists and some minimal CSS for styling.

STEP1: Mark the HTML element to drag and drop as draggable.

You do this by setting the attribute “draggable” to true on the element you want to drag.

Since we want to drag any of the list items in the technologies list we will mark them all as draggable.

<h1>Pick your favourite technology</h1> 

<ul >
<lh><strong>Technologies</strong></lh>
<li draggable="true"  id="Java">Java </li>
<li draggable="true" id="Angular">Angular </li>
<li draggable="true" id="HTML"> HTML</li>
<li draggable="true" id="CSS"> CSS</li>
<li draggable="true" id="Javascript"> Javascript</li>
</ul>

STEP2: Write a javascript function for the event ondragstart.

This method is to tell what to do when you start dragging.

What we are going to do is fetch the id of the list item we want to drag and store it in ‘event.dataTransfer’ object

Here is the function:

function ondragstartHandler(event) {
  
   event.dataTransfer.setData("technology", event.target.id);
    
}

STEP3: Write a javascript function for the event ondragover

This method is to tell what to do when you drag the element over the target element on which you are going to drop. In our case we are going to drop it in another unordered list element.

function ondragoverHandler(event) {

  event.preventDefault();
}

We just prevent the default behavior of browsers here by calling the method preventDefault() on event object.

By default browsers don’t allow you to drag and drop any element over other element.

STEP4: Write a javascript function for the event ondrop

This method is used to tell what to do when user drops an element on to another element.

We get the id of the list element which we copied in STEP 2 , retrieve the element using this id and append it to the new unordered list:

function ondropHandler(event) {
  
    var data = event.dataTransfer.getData("technology");
    event.target.appendChild(document.getElementById(data));
  
}

STEP5: Call the javascript functions on the respective events

We wrote three javascript functions.

The first one ondragstartHandler should be mapped to the source element which is going to be dragged. In our case it is the first unordered list . So we map it to the ondragstart event of the unordered list :

<h1>Pick your favourite technology</h1> 

<ul ondragstart="ondragstartHandler(event)" >
<lh><strong>Technologies</strong></lh>
<li draggable="true"  id="Java">Java </li>
<li draggable="true" id="Angular">Angular </li>
<li draggable="true" id="HTML"> HTML</li>
<li draggable="true" id="CSS"> CSS</li>
<li draggable="true" id="Javascript"> Javascript</li>
</ul>

The second and third javascript functions need to be mapped to the target element where we are going to drop :

<ul ondragover="ondragoverHandler(event)" ondrop="ondropHandler(event)" >
<lh>My Favourites</lh>

</ul>

Now we can test our changes:

If you want to drag and drop back the elements , map all the three javascript functions to both source and target elements:

<h1>Pick your favourite technology</h1> 

<ul ondragstart="ondragstartHandler(event)" ondragover="ondragoverHandler(event)" ondrop="ondropHandler(event)">
<lh><strong>Technologies</strong></lh>
<li draggable="true"  id="Java">Java </li>
<li draggable="true" id="Angular">Angular </li>
<li draggable="true" id="HTML"> HTML</li>
<li draggable="true" id="CSS"> CSS</li>
<li draggable="true" id="Javascript"> Javascript</li>
</ul>

<h1>Drop them on the below text</h1>

<ul ondragstart="ondragstartHandler(event)" ondragover="ondragoverHandler(event)" ondrop="ondropHandler(event)" >
<lh>My Favourites</lh>

</ul>

And then you can do this :

Here is the complete code:

<!DOCTYPE HTML>
<html>
<head>

<style>
li {
  border: 1px solid black;
  background-color: yellow;
  width: 100px;
}


</style>
<script>


function ondragoverHandler(event) {

  event.preventDefault();
}



function ondragstartHandler(event) {
  
   event.dataTransfer.setData("technology", event.target.id);
    
}

function ondropHandler(event) {


  
    var data = event.dataTransfer.getData("technology");
    event.target.appendChild(document.getElementById(data));
	
	
  
}
</script>
</head>
<body>



<h1>Pick your favourite technology</h1> 

<ul ondragstart="ondragstartHandler(event)" ondragover="ondragoverHandler(event)" ondrop="ondropHandler(event)">
<lh><strong>Technologies</strong></lh>
<li draggable="true"  id="Java">Java </li>
<li draggable="true" id="Angular">Angular </li>
<li draggable="true" id="HTML"> HTML</li>
<li draggable="true" id="CSS"> CSS</li>
<li draggable="true" id="Javascript"> Javascript</li>
</ul>

<h1>Drop them on the below text</h1>

<ul ondragstart="ondragstartHandler(event)" ondragover="ondragoverHandler(event)" ondrop="ondropHandler(event)" >
<lh>My Favourites</lh>

</ul>



</body>
</html>

That’s it!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s