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.
