Any idea how to make this script touch-friendly?

Question

A bit background info: this simple game http://deslimmespeeltuin.nl/speeltuin.htm is going to be part of an educational project for children. It is based on Marco Kuiper's nice Polaroid Viewer (http://demo.marcofolio.net/polaroid_photo_viewer). The original script is a bit old and I had to update its jquery libraries references for it to work on the latest IE, for example. However, it doesn't work on touch devices (Android / iOS), which is a real pity. Although it looks all right, YOU CANNOT DRAG THE SHAPES.

I'm not a programmer. Marco himself would like to help, but is too busy. Does anyone have a clue? Any advice would be great.

Have you considered using "cocos2d html5"? – the_marcelo_r Sep 03 '13 at 17:47 — the_marcelo_r, Sep 03 '13 at 17:47

score 0 · Accepted Answer · edited May 23 '17 at 12:11

If you add this to your HTML file it should work:

<script>
function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent({
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}

// Call the init function when the document has finished loading.
$(document).ready(function(){
    init();
});
</script>

This is originally from here: Javascript Drag and drop for touch devices I have tested this by emulating touch events in Chrome after running the code through the console and it works on your example site.

Any idea how to make this script touch-friendly?

1 Answers1