How to handle drag events on iphone and ipad with javascript/jquery?

Question

Hey,

I have a little app that has been under development for some time. My friends and I have been working really hard on this and are near release of the beta version.

I want to give some demos using iPhone and iPad to look cool :p

Now my problem is how to handle:

• Mouse Down
• Mouse Up
• Mouse Leave

The multitouch interface of the iPhone (which I expect is similar to the iPad) handles mouse move on a browser has a scrolling event. One could try to capture the scrolling event and use it to simulate the dragging but I don't even know if it will be doable or if it will only be a hack.

Any one knows of a more robust manner to manage dragging events on the iphone/ipad?

Answer 1

Apple's Developer pages have a lot of good info on handling just these types of issues.

Handling Events

Answer 2

I think the correct link is: http://developer.apple.com/iphone/library/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/EventHandling/EventHandling.html

Answer 3

See http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

Answer 4

I tried to use http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ but was unable to get it working. I added the file, and then added .addTouch() to the dragggable element like so:

$(".draggable").addTouch();

but no luck, in fact it broke the dragging functionality.

I didn't see any documentation on the site, so I must be calling .addTouch() improperly somehow,

John