Drag and Drop with jQuery for Touch Devices



Drag and Drop with jQuery for Touch Devices

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.





9 thoughts on “Drag and Drop with jQuery for Touch Devices

  1. I wonder how panning might exist on the same page page as this drag and drop?. Any page with you code the drag and drop works great but the side to side panning is lost

  2. I have a problem. If I want to put a link with the bottom works ok on my computer, but It doesn’t work with my ipad. Any idea???

Leave a Reply

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