I then tried the app on an iPad to see how it behaved, and the graphs on the dashboard all displayed brilliantly, but I couldn’t for the life of me get it to drag-to-resize. A bit of investigation shows that the touch-based mobile safari doesn’t raise the mousemove event at all, probably because holding down a finger and moving it is used for scrolling, and apart from the location or zoom changing the browser isn’t aware that anything has happened.
Normally with this sort of thing there is some kind of workaround that you can do, but in this case the browser literally doesn’t raise events so there really isn’t anything that can be done, at least not with dragging. For now this will just have to be a known limitation on touch based interfaces. If I really wanted to make it work I would have to subscribe to mousedown on the drag panel to initiate a resize, and then watch for a mousedown somewhere else on the parent container to indicate this is where the new bottom right corner should be. Not at all intuitive or elegant, but probably the only method of doing it in a mousemove-less environment.
- Mouse events (Move, over, out etc) over a non-input element (apple has a workaround for this one, see below)
- Double Click on an element
- Scrolling (apple says it will raise scroll event if user does a 2-finger pan gesture, but given then most pages simply expand vertically rather than showing a scrollable element this is of limited use)
<div ontouchstart="touchStart(event);" ontouchmove="touchMove(event);" ontouchend="touchEnd(event);" ontouchcancel="touchCancel(event);" ></div>