Did you find this useful?
Socialize it today.


HTML5 Drag and Drop

Friday, November 09, 2012

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



Drag the crumpled paper into the trash can.




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.


EventDescription
dragstartTriggered when the user starts dragging of the object.
dragenterTriggered when the mouse is first moved over the target element while a drag is occuring.
dragoverTriggered as the mouse is moved over an element when a drag is occuring.
dragleaveTriggered when the mouse leaves an element while a drag is occuring.
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...



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

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML5: The Missing Manual HTML CSS and JavaScript Head First HTML5 Programming: Building Web Apps with JavaScript