Touch Resize Panel in GWT

Question

I have developed a resizable panel in GWT. For this i have referred the following post,

GWT resizable panel

I have hosted a demo in AppEngine. Please Check this : http://rvs-test.appspot.com

Can anyone help me to enable touch events for the Panel to get Resized. I am looking to implement the same in iPad as well as Android Tablets. But this doesn't seem to work over there.

Actually what happens in iPad is, when i touches on the Panel, the Entire Panel gets selected. I tried using the following

-webkit-user-select: none;
-webkit-touch-callout: none; 

But still it gets selected. This is the same case with the VerticalSplitPanel in Roughian GWT Examples. Here is the Link to it,

http://examples.roughian.com/#Panels~VerticalSplitPanel

Any help will be appreciated...!

Answer 1

I think we can manually remove the range.First catch the browser event and then remove all ranges from the DOM.Then you may get all other events.Try thout the following code to remove the selection ,

var sel = window.getSelection();
var range = sel.getRangeAt(0);
sel.removeAllRanges();

Answer 2

I figured it out myself.... I added touch events just as i added mouse events

For ,

1. MOUSE DOWN --- TOUCH START
2. MOUSE UP --- TOUCH END
3. MOUSE MOVE --- TOUCH MOVE
4. ON LOSE CAPTURE --- TOUCH CANCEL

then i added sink events to my touch events,

this.sinkEvents(Event.MOUSEEVENTS | Event.ONLOSECAPTURE | Event.TOUCHEVENTS | Event.ONTOUCHCANCEL);