HTML5 Drag and Drop Demo

I've done some research about HTML5 APIs, today I want to show you the Drag and Drop.

It's pretty cool and best of all works in all major browsers!

So I've built a simple demo playing with containers and HTML data attributes. We'll retrieve the containers attributes once we drop them in the drop zone.

Costs App Calculator

Let's get into it.


Fairly simple HTML, all you need is the drop zone and the draggable items:

<div id="drop"></div>
<div draggable="true" class="dragable-item" data-title="Box 1" data-price="200">1</div>Code language: HTML, XML (xml)

The JavaScript

Here comes the juicy part. Basically what we want to do is add event listeners to the draggable items and to the drop zone.

We'll use callback functions to create actions when the items are dropped inside the drop zone.

I'm using jQuery just as a selector and for DOM manipulation. You could use pure JavaScript or an other library of your choice, it's not required for the code to work.

// Callback function when cancelling the event
function cancel(e) {
  if (e.preventDefault) {
  return false;

// Get the #drop zone
var drop = document.getElementById('drop');

var draggedItem = null;

// Add the Event Listener to each draggable item		
		draggedItem = jQuery(this);
        e.dataTransfer.setData('Text',; // required otherwise doesn't work

drop.addEventListener('dragover', cancel);
drop.addEventListener('dragenter', cancel);

drop.addEventListener('drop', function (e) {
   // Prevent default browser behaviour 
   // Here you can do anything you want 
  return false;
});Code language: JavaScript (javascript)

What I've done with the demo is retrieve the data attributes and print them inside the drop zone (check the Demo page source code for full details)

What about mobile?

HTML5 got you covered! There are touch events ready to boost your code on mobile devices.

Check out the full list on HTML5 Rocks.

Unfortunately I haven't been able to completely adapt this demo for touch devices, I'll update as soon as I can.


View Demo


  1. James says:

    Not working in Chrome currently

    1. Rick says:

      Hey James,

      Thank you for letting me know. Chromes was throwing an error due mixed HTTPS/HTTP content.

      It is now fixed, give it another try:

  2. Danno says:

    In 2016, othing happening in IE11 with drag & drop.

  3. JB says:

    Great tutorial! I did notice that the drag and drop functionality does not work in FireFox. Any suggestions how to make drag and drop work in FF?

    1. Rick says:

      Hi JB,

      Thanks for the heads up! I’ve fixed the demo to work on Firefox.


      1. jb says:

        Hi Rick,

        I was able to fix the problem as well by adding

        ev.dataTransfer.setData(‘Text’,; // required otherwise doesn’t work

        I see you did the same. Any idea why FireFox requires this line of code in order to work?

      2. Rick says:

        I don’t. Check out the Mozilla Developer documentation, it might give you some explanation:

Leave a Reply

Your email address will not be published. Required fields are marked *