Pinching with Hammer.js

by emanuelbsilva

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="square"></div>

CSS

body, html {
    width:100%;
    height:100%;
}

.wrapper {
    width:100%;
    height:50%;
    position: relative;
    display: table;
    text-align: center;
}

.wrap {
    display: table-cell;
    vertical-align: middle;
}

#square {
    width:200px;
    height:200px;
    background:orange;
    margin:0 auto;
}

#circle {
    border-radius:200px;
    width:200px;
    height:200px;
    background:red;
    margin:0 auto;
}
</style>
<meta name="viewport" content="width=device-width">
<style>

JavaScript

!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);

var dom   = document.body,
    width = parseInt($('#square').css('width')),
    vel   = 5.0,
    min   = 100,
    max   = 400,
    scale;

function gestureChange( e ) {
    e.preventDefault();

    scale = e.gesture.scale;
    
    console.log(e);
    
    var tempWidth = width * scale;

    if ( tempWidth > max ) tempWidth = max;
    if ( tempWidth < min ) tempWidth = min;

    $( '#square' ).css({
        width  : tempWidth + 'px',
        height : tempWidth + 'px'
    });
}

function gestureEnd( e ) {
    e.preventDefault();
    width = parseInt( $( '#square' ).css( 'width' ) );
}

Hammer( square ).on( 'pinch', gestureChange );
$( "#square" ).draggable();