Question

I can't seem to find a way to make the fake multitouch work on IE, currently testing on 10 and 11. Ive created the following example, picked the code from hammerjs examples page and tweaked a bit.

http://jsbin.com/tikimume/3/

Is this supposed to work with IE ? Is there a way to fix this ?

Was it helpful?

Solution

Yes you can, see the below code it should allow your picture to be dragged, transformed, tapped, etc. The multitouch and fake gesture should be visible as well.

I have tested the code below in IE 10 AND 11

Code:

<body id="bodyElement">
    <div id="container">
        <img id="small" src="http://1800recycling.com/wp-content/uploads/2010/06/mona-lisa-lego1.jpg" width="40px" height="40px"/>
            <div id="wrapper">
                <img id="large" src="http://1800recycling.com/wp-content/uploads/2010/06/mona-lisa-lego1.jpg" alt="Colefax Classics" /> 
                <p id="coordinates"></p>
            </div>
    </div>
    <script src="hammer.fakemultitouch.js" type="text/javascript"></script>
    <script src="hammer.showtouches.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function(ev){

            var isOpen = false;
            var posX, posY,
                lastPosX, lastPosY,
                bufferX, bufferY,
                scale, last_scale, dragReady=0;

            var t;
            var lastX;
            var lastY;
            var elemRect = document.getElementById('large');

            window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 

            //displays touch events
            Hammer.plugins.showTouches();
            Hammer.plugins.fakeMultitouch();

            var hammer = Hammer(bodyElement, {
                transform_always_block: true,
                transform_min_scale: 1,
                drag_block_horizontal: true,
                drag_block_vertical: true,
                drag_min_distance: 0,
                preventDefault: true
            }); 

            function SetDefaultImagePosition() {
                posX=0, posY=0,
                lastPosX=0, lastPosY=0,
                bufferX=0, bufferY=0,
                scale=1, last_scale, dragReady=0;
            }                   

            hammer.on('tap touch drag transform transformend dragstart dragend', function(ev) {
                ev.gesture.preventDefault();
                manageMultitouch(ev);
            });     

            function manageMultitouch(ev) {
                switch(ev.type) {
                    case 'tap' :
                        if(isOpen === false) {
                            $('#large').show();
                            isOpen = true;
                        } else {
                            $('#large').hide();
                            isOpen = false;
                        }
                        SetDefaultImagePosition();
                        break;

                    case 'touch' :
                        last_scale = scale;

                        break;

                    case 'drag' :
                        if(t){
                            if (typeof lastX === 'undefined' && typeof lastY === 'undefined'){
                                lastX = 0;
                                lastY = 0;
                            }
                            if(scale > 1) {
                                posX = (ev.gesture.deltaX + lastX * scale)/scale;//This is another workaround for the multiple drag glicth
                                posY = (ev.gesture.deltaY + lastY * scale)/scale;
                            } else {
                                posX = (ev.gesture.deltaX + lastX)/scale;//This is another workaround for the multiple drag glicth
                                posY = (ev.gesture.deltaY + lastY)/scale;
                            }
                        }

                        break;

                    case 'transform' :
                        scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 3));
                        t=false;
                        break;

                    case 'dragend' :
                        if(t){
                            lastX = posX;
                            lastY = posY;
                        } else {
                            t = true;
                        }   
                        break;
                }

                transform = "scale3d("+scale+","+scale+", 1) " +
                    "translate3d("+posX+"px,"+posY+"px, 0) ";

                requestAnimationFrame(function() {
                    elemRect.style.transform = transform;
                    elemRect.style.oTransform = transform;
                    elemRect.style.msTransform = transform;
                    elemRect.style.mozTransform = transform;
                    elemRect.style.webkitTransform = transform;
                });     
            } 
        });

        </script>
</body>

in the head all you have to add is a reference to hammer.min.js.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top