Drag and Drop of DOM objects using HTML5

Many people might see the complexity of doing Drag and Drop (DnD) of HTML DOM objects before HTML5. Because of browser's native standards and its limitations DnD the elements is more complicated with Javascript. 

But now this complexity was breakdown into simple process with the help of HTML5! The DnD specifications in HTML5 are in the form of event based mechanism, Javascript API.

We can drag the HTML elements just by declaring the draggable property to it.

DnD Events:

There are many events in the DnD event model. Here are the list of events available for DnD in HTML5:

• ondragstart
• ondragenter
• ondragover
• ondragleave
• ondrop

The name of the event itself will tell you the fundamental flow of the event.

In this article I would like to explain each of the event with an example. The basic goal of my example is to drag the images from one place to another on a web page. The following are the steps for doing this:

Step1: Define few of the images in your HTML inside DIV tags.

Step2: As we are dragging images from one place to another, make sure to add draggable property to image tags and set its value as true.

Step3: As we are dragging images and drag will start from here, add ondragstart event to images which you want to drag.

Step4: After dragging the images, to drop them on a page, we need some container to hold them. So add few of DIV tag on a page as placeholders for the images.

Step5: After dragging the images, now we are going to drop them on DIV containers. So add ondragenter, ondragover, ondragleave and ondrop events to each and every DIV tags which are act as placeholders.

Step6: Now you HTML code looks like as:

<div class="thumbnail" id="source1" ondragenter="onDragEnter(event);" ondragover="onDragOver(event);" ondragleave="onDragLeave(event);" ondrop="onDrop(event);">
<img id="img1" src="images/img1.jpg" alt="img1" width="100" height="100" draggable="true" ondragstart="onDragStart(event);" />
</div>

 <div class="thumbnail" id="source2" ondragenter="onDragEnter(event);" ondragover="onDragOver(event);" ondragleave="onDragLeave(event);" ondrop="onDrop(event);">
<img id="img2" src="images/img2.jpg" alt="img2" width="100" height="100" draggable="true" ondragstart="onDragStart(event);" /> 
</div>

<div class="thumbnail" id="source3" ondragenter="onDragEnter(event);" ondragover="onDragOver(event);" ondragleave="onDragLeave(event);" ondrop="onDrop(event);">
<img id="img3" src="images/img3.jpg" alt="img3" width="100" height="100" draggable="true" ondragstart="onDragStart(event);" /></div>

 <br style="clear:both" /><br />

<div class="thumbnail" id="target1" ondragenter="onDragEnter(event);" ondragover="onDragOver(event);" ondragleave="onDragLeave(event);" ondrop="onDrop(event);"></div>

 <div class="thumbnail" id="target2" ondragenter="onDragEnter(event);" ondragover="onDragOver(event);" ondragleave="onDragLeave(event);" ondrop="onDrop(event);"></div>

 <div class="thumbnail" id="target3" ondragenter="onDragEnter(event);" ondragover="onDragOver(event);" ondragleave="onDragLeave(event);" ondrop="onDrop(event);"></div>

The above sample code saying that, if we drag any image over to DIV container, the following events will be execute in the same order:

ondragstart, ondragenter, ondragover, ondragleave and ondrop

Here are the Javascript functions for the above events:

        function onDragStart(e) {  
            e.dataTransfer.setData("Text", e.target.id);
        }

        function onDragEnter(e) {           
            e.target.style.backgroundColor = "#FBE1E7";
            e.target.style.borderColor = "Red";
        }

        function onDragOver(e) {
            e.preventDefault();
        }

        function onDragLeave(e) {           
            e.target.style.backgroundColor = "#EBDDE2";
            e.target.style.borderColor = "Blue";
        }

        function onDrop(e) {
            var imageID = e.dataTransfer.getData("Text");
            var srcImage = document.getElementById(imageID);
            if (e.target.tagName.toLowerCase() == "img")
            { alert("You can't drop on another image!"); e.preventDefault(); return false; }
            e.target.appendChild(srcImage);
            e.target.style.backgroundColor = "#EBDDE2";
            e.target.style.borderColor = "Blue";
            if (e.preventDefault())
                e.preventDefault();
            return false;
        }

The dataTransfer object of an event act as a bridge between source and target elements. And preventDefault() should be called in ondragover event in order to avoid browser's default behavior.

Optionally you can apply the following styles to HTML elements:

        .thumbnail
        {
            background-color:#EBDDE2;
            border:2px dotted blue;           
            width:100px;
            height:100px;           
            float:left;
            margin:5px;
            padding:4px;
        }
       
        *[draggable=true]
        { 
            cursor: move;
        }

 When you run the above code, you'll see the output in browser like: