Touch events on mobile Safari on iPad (likely also on Android tablets)

[GoogleCodeExporter]

First off, great work! I'm enjoying this a lot.

I noticed that dragging blocks didn't work on the iPad. Wiring up some touch 
events seems to fix it, more or less (there's some flakiness when the blocks 
get near the bottom of the screen which *may* be related to scrolling, but I 
haven't confirmed that).

In the init function in index.html:
            // Touch event handler for Google Blockly.
            // Tony Hursh. Based loosely on some code at: http://vetruvet.blogspot.com/2010/12/converting-single-touch-events-to-mouse.html
            // Same license as Blockly itself.

            Blockly.TouchEvents = {};
            Blockly.TouchEvents.touchMapper = {
                "touchstart" : "mousedown",
                "touchmove" : "mousemove",
                "touchend" : "mouseup"
            };

            Blockly.TouchEvents.touchHandler = function(event) {
                if (event.touches.length > 1){
                    return; // Punt on multitouch events.
                }
                var touchPoint = event.changedTouches[0];
                var mappedEvent = Blockly.TouchEvents.touchMapper[event.type];
                if(mappedEvent == null){ // We don't handle this event type (whatever it is). Punt.
                return;
            }
            var simulatedEvent = document.createEvent("MouseEvent");
            simulatedEvent.initMouseEvent(mappedEvent, true, true,  window, 1, touchPoint.screenX, touchPoint.screenY, 
                touchPoint.clientX, touchPoint.clientY, false, false, false, false, 0, null);
                touchPoint.target.dispatchEvent(simulatedEvent);
                event.preventDefault();
            };

            Blockly.svgDoc.ontouchstart = Blockly.TouchEvents.touchHandler;
            Blockly.svgDoc.ontouchmove = Blockly.TouchEvents.touchHandler;
            Blockly.svgDoc.ontouchend = Blockly.TouchEvents.touchHandler;

Original issue reported on code.google.com by tony.hu...@gmail.com on 14 Jun 2012 at 3:45

[GoogleCodeExporter]

I put the code at the end of init in demos/code/index.html.

Works on Chrome for Android (4.0.4).
Draging, but blocks do not connect on Android 4.0.4 standard-browser.
Not working on mobile Firefox.

Desktop Chrome still works as before.

I would love to see this code in the base.

Original comment by markus.k...@gmail.com on 15 Jun 2012 at 2:05

[GoogleCodeExporter]

committed in r270.

test on Android browsers:

* Mozilla aurora (can't use scrollbar to select block, blocks do not connect), 
* Chrome android (can't use scrollbar to select block, blocks do not connect)
* android 4.0 build-in browser (weird after select from menu)

Original comment by gasolin on 22 Jun 2012 at 7:11

• Changed state: Fixed

[GoogleCodeExporter]

it just works in iPad, thank you..

Original comment by jinniahn on 4 Nov 2012 at 12:06

[GoogleCodeExporter]

hi,im taking a class of programing in college and we are using blockly, but its 
not working fine in my ipad, i know that this code will helpme, but i dont know 
how to use it,can you help with it?

Original comment by pguggia...@gmail.com on 13 Aug 2013 at 1:37