Question

I was testing out an interface I built using jQuery UI draggable, droppable and sortable and noticed that the drag and drop doesn’t work in the mobile browser. I suppose there is a different way in which events are fired in the mobile browser.

Are there any JavaScript frameworks yet, that support drag and drop in the mobile browser?

If not, any ideas on how one could go about putting together some basic drag/drop functionality?

Answer 1

A tricky one…I think you’ve pretty much highlighted the problem: the touch events aren’t integrated with the jQuery drag/drop functionality yet, and I’m not sure if there are drag/drop libraries out there targeting the mobile device range.

What I can say is that you can start tapping into those events yourself, but I’m not sure if you’re willing to write all that yourself. In simple terms, checking for a mobile device and then attaching the events could be achieved like this:

if (navigator.userAgent.match(/iphone/i) ||
    navigator.userAgent.match(/ipad/i) ||
    navigator.userAgent.match(/ipod/i) ||
    navigator.userAgent.match(/android/i))
{
    var element = $('#your_draggable_element_id');
    element.bind('touchstart', touchStartFunctionHere);
    element.bind('touchmove', touchMoveFunctionHere);
    element.bind('touchend', touchEndFunctionHere);
}

That would patch you into the events, which would give you control over what you did next. You’d obviously want the locations of drag moves, touches, etc., and you can get those from the event itself. For example, based on the above code:

function touchMoveFunctionHere(event)
{
    event.preventDefault();
    var x = event.originalEvent.touches[0].pageX;
    var y = event.originalEvent.touches[0].pageY;

    ...

}

Not the complete solution you were looking for, and I hope someone else can shed some light on drag/drop frameworks for mobile devices, but it’s a start! Hope this helps!