HTML5 Drag and Drop

HTML 5 comes with a very nice Drag and Drop JavaScript API that brings native Drag and Drop support to the browser. This makes coding DnD much easier. The specification defines an event based mechanism (dependent on JavaScript and markup) for declaring that most HTML elements be draggable on a page.

This native support results in faster, more responsive web apps. To achieve drag and drop functionality with the HTML 4 standard, web developers would have to use complex JavaScript programming or integrate other JavaScript frameworks such as jQuery.

Browser Support

Most modern browsers support Drag and Drop. Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop. Early versions of Internet Explorer do not support HTML5 Drag and Drop.

Making an Element Draggable

To make an element draggable, you simply need to set the draggable attribute to true.

<element draggable="true">

Example

Here is an example, where you can drag an image into a div element.

<span id="trashMsg">Drag the crumpled paper into the trash can.</span>
<img id="paper" src="crumpled_paper.png" draggable="true" ondragstart="drag(event)" width="120" height="120">
<div id="trash" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("Text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
        document.getElementById('trash').style.backgroundImage = "url('trash_full.jpg')"
        document.getElementById('paper').style.visibility = "hidden"
        document.getElementById('trashMsg').innerHTML = "Thanks for keeping the area clean!"
    }
</script>

Aside from the Drag and Drop events, we also leverage the DataTransfer object, which is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types.

Drag and Drop Operations

In the example above, the ondragstart attribute calls a function drag(event) that specifies what data is to be dragged. The dataTransfer.setData() method sets the data type and the value of the dragged data. The ondragover event specifies where the dragged data can be dropped.

By default, data and/or elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element. This is accomplished by calling the event.preventDefault() method for the ondragover event. When the dragged data is dropped, a drop event occurs. In the example above, the ondrop attribute calls a function, drop(event).

Listening for Drag and Drop Events

In this tutorial, we used the DataTransfer object to help us with the Drag and Drop operations. There are 7 events that can be used to monitor the entire Drag and Drop process.

For example…

<script>
    var dragged;

    document.addEventListener("drag", function (event) {

    }, false);

    document.addEventListener("dragstart", function (event) {
        // store a ref. on the dragged elem
        dragged = event.target;
        // make it half transparent
        event.target.style.opacity = .5;
    }, false);

    document.addEventListener("dragend", function (event) {
        // reset the transparency
        event.target.style.opacity = "";
    }, false);

    /* events fired on the drop targets */
    document.addEventListener("dragover", function (event) {
        // prevent default to allow drop
        event.preventDefault();
    }, false);

    document.addEventListener("dragenter", function (event) {
        // highlight potential drop target when the draggable element enters it
        if (event.target.className == "dropzone") {
            event.target.style.background = "purple";
        }

    }, false);

    document.addEventListener("dragleave", function (event) {
        // reset background of potential drop target when the draggable element leaves it
        if (event.target.className == "dropzone") {
            event.target.style.background = "";
        }

    }, false);

    document.addEventListener("drop", function (event) {
        // prevent default action (open as link for some elements)
        event.preventDefault();
        // move dragged element to the selected drop target
        if (event.target.className == "dropzone") {
            event.target.style.background = "";
            dragged.parentNode.removeChild(dragged);
            event.target.appendChild(dragged);
        }

    }, false);
</script>