Programming a mobile Web App with Advanced Touch Controls

The Situation:

I have a mobile, HTML5 application. The application works great in any browser that isn't mobile. The game is fairly 'boggle-like', with you clicking a tile, and dragging the mouse across other tiles to make a string of tiles. This involves capturing a mousedown event, then recording and changing all the tiles you drag over, and stopping on a mouseup event.

The Problem In it's native form, it doesn't work on iOS devices or the Blackberry Playbook. I have the ability, within the iOS arena, to disable screen movement, but I have yet to figure out how I can record L-shaped touches and 'tag' every tile that is touched in a single motion.

Is there a framework, jQuery plugin or something along those lines that would work? Ideally, it would work on both iOS, Playbook and Android browsers as a 'finished product'.

Thanks in advance!

the thing is not about the phone it self, its about the browser, and you should know that not all browser handle html5, if you are handling this case we can jump to the next thing, the plugins, I can provide you with a couple of links that have some good plugins:

http://jqtouch.com/ // VERY good plugin and I prefer you work on this one

http://awardwinningfjords.com/2010/09/22/handling-touch-events-in-jquery-tools-scrollable.html

http://plugins.jquery.com/plugin-tags/touch

http://www.evanbyrne.com/article/super-gestures-jquery-plugin should work

For touch screens the functions you are looking for are ontouchstart and ontouchend.

Take a look at a these slides, for a tutorial with examples. But basically, you'll probably want to refactor the tile changing code from your onmousedown/up to another function, and set the conditions for that in your onmousedown/up and ontouchstart/end.

Also, since you are familiar with JQuery, have a look at JQuery Mobile

Check out PastryKit, It was developed by apple themselves. https://github.com/jimeh/PastryKit

You can try the following :

DHTMLx( You need to purchase the product for Commercial use.)

Sencha Touch

Titanium Mobile - It compiles most of your code into a native iPhone or Android app. Essentially it is not web framework, but a compatibility layer.

Refer the comparison blog blog, Sencha Touch was much preferred over JQTouch and Jquery Mobile