How to: Drag and Drop with HTML5


Posted on December 26th, by Alaa Badran in Browsers, CSS, Design, DHTML, Free Stuff, HTML, Java Script, Jquery, Misc, News, Web & Programming, Web Browsers. 2 comments

How to: Drag and Drop with HTML5

Drang n’ Drop in HTML 5 is supported by: IE9+, Firefox 3.6+, Safari 4+, Opera 11+ and Chrome 12+. But its not supported yet for touch devices like Touch Mobiles and Tablets.
To make things more clear, its not only HTML 5.. Its a combination between HTML 5, CSS 3, and Javascript.

Why we combine Javascript with HTML 5? It’s just because we need validations and functionalities to make drag and drop functioning right.

Here I want to show an example for a drag n’ drop using HTML 5 and then discuss the code. Please check this example: freelancer-id.com/html5-drag-and-drop

The HTML code used in the example is:

<!-- Drop Area -->
<div id="recycle_bin"></div>
<!-- Items -->
    <ul>
        <li id="can1" dragable="true"><a href="#"><img src="images/can1.png" alt="can 1"></a></li>
        <li id="can2" dragable="true"><a href="#"><img src="images/can2.png" alt="can 1"></a></li>
        <li id="paper1" dragable="true"><a href="#"><img src="images/paper1.png" alt="can 1"></a></li>
        <li id="paper2" dragable="true"><a href="#"><img src="images/paper2.png" alt="can 1"></a></li>
    </ul>

You may customize the HTML elements with some CSS like:

*[dragable=true], a{
    -moz-user-select:none; /* to prevent text highlight when dragging */
    -webkit-user-select:none;
    -khtml-user-drag: element;
    cursor:move;
}
#recycle_bin{
    width:150px;
    height:145px;
    opacity:1;
    position:absolute;
    top:400px;
    right:20px;
    z-index:20;
    background:url(images/bin.png) center top no-repeat;
}
#can1{
    position:absolute;
    top:340px;
    left:340px;
    z-index:20;
}
#can2{
    position:absolute;
    top:480px;
    left:260px;
    z-index:20;
}
#paper1{
    position:absolute;
    top:400px;
    left:100px;
    z-index:20;
}
#paper2{
    position:absolute;
    top:420px;
    left:600px;
    z-index:20;
}
#recycle_bin.over{
    opacity:0.8;
}

The codes: -moz-user-select:none; -webkit-user-select:none; and -khtml-user-drag: element; are only used to prevent highliting text while dragging. So, I think it’s important.

Now, let’s talk about Javascript code.. Before that, i would like to mention that I used jQuery library while I am familiar with it. It also simplifies my work.
Here is the code I used for Dragable items:

// applying events on dragable LIs
$("li").each( function (ind,value){
    $(this).bind('dragstart', function (e) {
        dataTransfer = e.dataTransfer = e.originalEvent.dataTransfer; // handling event
        dataTransfer.effectAllowed = 'copy'; // Create a copy effect.
        $(this).addClass('dragging');
    });
    $(this).bind('dragend', function (e) {
        $("#recycle_bin").removeClass('over');
        $(this).removeClass('dragging');
    });
});

That was exiting.. Just adding events like DragStart and DragEnd.

Now, when you Drop the Item inside or over the Droppable element, what would happen? here is what we should do to make it work:

$("#recycle_bin").bind('dragover', function (event) {
    dataTransfer = event.dataTransfer = event.originalEvent.dataTransfer;
    if (event.preventDefault) event.preventDefault(); // allows us to drop
    dataTransfer.dropEffect = 'copy'; // Create a copy effec.
    $("#recycle_bin").addClass('over'); // Add css style on over
    return false;
});
// now, removing css style from Recucler when drag is ended
$("#recycle_bin").bind('dragleave', function () {
    $(this).removeClass('over'); // removing style when drag is ended.
});

Now, when dropping item inside the recycle bin (drop area) we should remove the item and reset the css style for recycler (drop area).. Here is how to do that:

$("#recycle_bin").bind('drop', function (e) {
    if (e.stopPropagation) e.stopPropagation();
    $('.dragging').remove(); // removing dropped item.
    $("#recycle_bin").removeClass('over');
    var c = $("li").length;
    if(c<1){ // When all items are removed
        alert("Congratulations:\nYou've successfully cleaned the beach.");
        return false;
    }
    return false;
});

Enjoy :)





2 thoughts on “How to: Drag and Drop with HTML5

  1. really nice topic!very comprehensive review. I’m thinking about learning HTML5. I’m seeing more and more freelance listings asking forknowledge and so along with reading some of the online references you listed

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>