[ACCEPTED]-jquery mobile drag and drop-jquery-mobile
jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.
Currently, jQuery UI user interface library does 16 not support the use of touch events in their 15 widgets and interactions. This means that 14 the slick UI you designed and tested in 13 your desktop browser will fail on most, if 12 not all, touch-enabled mobile devices, becuase 11 jQuery UI listens to mouse events—mouseover, mousemove 10 and mouseout—not touch events—touchstart, touchmove 9 and touchend.
That's where jQuery UI Touch 8 Punch comes in. Touch Punch works by using 7 simulated events to map touch events to their mouse event analogs. Simply 6 include the script on your page and your 5 touch events will be turned into their corresponding 4 mouse events to which jQuery UI will respond 3 as expected.
As I said, Touch Punch is a 2 hack. It duck punches some of jQuery UI's core functionality 1 to handle the mapping of touch events...
This problem is known and has already been 3 investigated.
It requires a correct .preventDefault() call 2 in the right event handler.
Everything you 1 need is here:
jQuery - draggable images on iPad / iPhone - how to integrate event.preventDefault();?
http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/ contains an excellent code sniplet that 1 converts touch events to mouse events:
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;
}
// initMouseEvent(type, canBubble, cancelable, view, clickCount,
// screenX, screenY, clientX, clientY, ctrlKey,
// altKey, shiftKey, metaKey, button, relatedTarget);
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);
}
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.