Computers & ProgrammingHTML5Web Development

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">


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>

    function allowDrop(ev) {

    function drag(ev) {

    function drop(ev) {
        var data = ev.dataTransfer.getData("Text");;
        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!"

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.

dragstartTriggered when the user starts dragging the object.
dragenterTriggered when the mouse is first moved over the target element while a drag is occurring.
dragoverTriggered as the mouse is moved over an element when a drag is occurring.
dragleaveTriggered when the mouse leaves an element while a drag is occurring.
dragTriggered every time the mouse is moved while the object is being dragged.
dropTriggered when the drop occurs.
dragendTriggered when the user releases the mouse button while dragging an object.

For example…

    var dragged;

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

    }, false);

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

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

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

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

    }, false);

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

    }, false);

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

    }, false);

Leave a Comment

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

Scroll to Top