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.

Answer 1

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.