Question

I implemented the simple webview app through android to point to an html file which will be used to drag and drop icons like a simple puzzle game. I used the jquery draggable and droppable libraries to implement on the html-side, but when I pulled it up on the webview, it didn’t work. After searching the forums, I tried several fixes and none of them worked. I think that this post could be the answer, but it also didn’t work out: Javascript Drag and drop for touch devices. Although, I don’t think I implemented it properly, since I just added it on to the code which uses the draggable/droppable from jquery.ui.

Here’s the draggable/droppable code:

 $(document).ready(function() {
    init(); 
 $( "#draggable" ).draggable({
            snap:"#droppable", snapMode: "inner", revert: "valid"});
    $( "#droppable" ).droppable({
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        },
        out: function( event, ui ) {
            $( this )
                .removeClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Drop here" );
        }
    });
  });

here’s the touch handler implementation:

 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 init()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);    
}

In the body of the html, I am using divs to call out the draggable and droppable.
Not sure why it’s not working…any guidance would be appreciated.

Answer 1

Ok, so after struggling with this for a while, I came across this link which does something similar, but allows for the touch-based drag and drop. Hope it is useful to you.
http://www.stevefenton.co.uk/Content/Jquery-Mobile-Drag-And-Drop/