Try to resize image by HammerJS in iOS not work

Question

I try to make image resizable on iOS by Hammer.js gesture.

This jsfiddle code work OK on desktop, and this is my converted code (run on iOS safari)

var startX,startY,startW,startH;
var canResize = false;

$('img').hammer().on("touch", function(events) {
    canResize = true;
    var e = events[0];
    startX = e.pageX;
    startY = e.pageY;
    startW = $(this).innerWidth();
    startH = $(this).innerHeight();
    return false;
});

$('img').hammer().on("release", function(events) {
    canResize = false;
    return false;
});

$('img').hammer().on("drag", function(events) {
        var e = events[0];
        if (canResize == true) {
            $(this).innerWidth(startW + e.pageX-startX);
            $(this).innerHeight(startH + e.pageY-startY);
        }
});

Another try code:

var canResize = false;
$('img').hammer().on("touch", function(events) {
    canResize = true;
    return false;
});

$('img').hammer().on("release", function(events) {
    canResize = false;
    return false;
});

$('img').hammer().on("drag", function(events) {
        if (canResize == true) {
            $(this).innerWidth += deltaX;
            $(this).innerHeight += deltaY;
        }
});

Events are fired but resize not work.

What am I doing wrong? Please help!

Answer 1

After some days, I realize that Hammer JS is not good in compatible with iOS. I use jQuery touch instead

$("document").ready(function() {
   var imgArray = $('img');
   for (var i = 0; i < imgArray.length; i++) {
       var startX,startY,startW,startH;
       var canResize = false;

       var image = imgArray[i];
       image.addEventListener('touchstart', function(e) {
           e.preventDefault();
           canResize = true;
           var touch = e.touches[0];
            startX = touch.pageX;
            startY = touch.pageY;
            startW = $(this).innerWidth();
            startH = $(this).innerHeight();
       }, false);

       image.addEventListener('touchend', function(e) {
           e.preventDefault();
           canResize = false;
       }, false);

       image.addEventListener('touchmove', function(e) {
           e.preventDefault();
           var touch = e.touches[0];
            if (canResize == true) {
                $(this).innerWidth(startW + touch.pageX-startX);
                $(this).innerHeight(startH + touch.pageY-startY);
            }

       }, false);
   }

});