Alaa Badran

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 buying testosterone gel online in uk removes two 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 🙂

Related posts:

Drag and Drop with jQuery for Touch Devices jQuery File Upload – With Drag n’ Drop Tips for Better Website Performance Scroll window smoothly using jQuery