Alaa Badran

In the last post: Drag and drop with HTML5, i explained how to drag and drop using HTML5 and Javascript (jQuery). I mentioned that touch devices such as iPhone, iPad, BlackBerry, Samsung…. etc, does not support HTML5 Drag and Drop features.

Now, in this post, i want to explain how to make Drag and Drop possible for all devices. Before we start, you must know that it’s all about Javascript..  And i will use jQuery library while i am familiar with it and it simplifies writing javascript.

The Demo Files are available to download, If you want more details.

Th HTML code I used in the example as following:

    <div id="touchme1" class="touchBox"><span>Box 1</span><b>Drag.</b></div>
    <div id="touchme2" class="touchBox"><span>Box 2</span><b>Drag</b></div>
    <div id="touchme3" class="touchBox"><span>Box 3</span><b>Drag</b></div>
    <div id="drop" class="dropArea"><b>Drop here</b></div>

As you can see above, its a simple HTML tag.. The first 3 DIVs will be dragable. The Last div is the Drop area.

I used jQuery library and Custom jQuery UI for Drag and Drop. But that was not the solution, because I tried many libraries to support Touch Devices.. Unfortunately, none before working on this example support drag and drop.

I found a code that converts drag and drop events into Touch events as following:

function touchHandler(event)
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";

    switch(event.type)
    {
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type="mousemove"; break;
        case "touchend":   type="mouseup"; break;
        default: return;
    }
    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
                              first.screenX, first.screenY,
                              first.clientX, first.clientY, false,
                              false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function initTouch()
{
   document.addEventListener("touchstart", touchHandler, true);
   document.addEventListener("touchmove", touchHandler, true);
   document.addEventListener("touchend", touchHandler, true);
   document.addEventListener("touchcancel", touchHandler, true);
}

Just include the above code into your webpage or add it in a file and include it. But don’t forget to INIT the events.
When the page is loaded, the function initTouch() must be called to do its work. I did that here:

$(document).ready(function (){initTouch();});

Items still not dragable yet. We need to initialize dragging for the first 3 dive by the following:

$("#touchme1, #touchme2, #touchme3").draggable({
    revert:true // to reset item location.
});

Now, we can drag items.. The revert option is used for resetting DIV’s locations when dropping the item any where in the page. We should now write a code for the Drop area to make an action when dropping item inside that area as following:

$("#drop").droppable({
    drop: function( event, ui ) {
        $(ui.draggable).remove(); // Remove the div we were dragging.
        $(this).css({'border':'#777 dashed 3px','background':'#eee'});
        // resetting CSS styles for Drop area.
    },
    over: function(event, ui) {
        $(this).css({'border':'#a33 dashed 3px','background':'#faa'});
        // Creating an effect on dragging over the Drop area.
    },
    out: function (event, ui){
        $(this).css({'border':'#777 dashed 3px','background':'#eee'});
        // resetting CSS styles for Drop area.
    }
});

You may download the Demo Files to see it in action and test it.

The code is now ready. I hope to see comments and more information about this.

Related posts:

How to: Drag and Drop with HTML5 jQuery: Catch Keyboard Events jQuery File Upload – With Drag n’ Drop Scroll window smoothly using jQuery