Drag and zoom with Hammer js

Question

I have a problem with dragging an image. I used a combination of these solutions to implement a pinch zoom centered on the pointer and working as I need: solution 1, solution 2.

The problem comes when I try to implement drag. I have not been able to find an optimal solution.

Here is my code

var scale = 1; 
var xLast = 0; 
var yLast = 0; 
var xImage = 0; 
var yImage = 0;
var lastScale, xNew, yNew;        
Hammer($('#myImage').get(0)).on("touch drag transform", function (event) {
    switch(event.type) {
        case 'touch':
             lastScale = scale;
             break;
        case 'drag':
             var posX = event.gesture.deltaX;
             var posY = event.gesture.deltaY;

             var xScreen = posX; //- $(this).offset().left;
             var yScreen = posY; //- $(this).offset().top;
             xImage = xImage + ((xScreen - xLast) / scale);
             yImage = yImage + ((yScreen - yLast) / scale);

             xNew = (xScreen - xImage) / scale;
             yNew = (yScreen - yImage) / scale;

             xLast = xScreen;
             yLast = yScreen;

             break;
        case 'transform':
             var posiX = event.gesture.center.pageX;
             var posiY = event.gesture.center.pageY;

             var xScreen = posiX; //- $(this).offset().left;
             var yScreen = posiY; //- $(this).offset().top;

             xImage = xImage + ((xScreen - xLast) / scale);
             yImage = yImage + ((yScreen - yLast) / scale);

             scale = Math.max(0, Math.min(lastScale * event.gesture.scale, 10));

             xNew = (xScreen - xImage) / scale;
             yNew = (yScreen - yImage) / scale;

             xLast = xScreen;
             yLast = yScreen;                     

             break;                
        }             
   $(this).css('-webkit-transform', 'scale(' + scale + ')' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')')
                    .css('-webkit-transform-origin', xImage + 'px ' + yImage + 'px')
                    .css('-moz-transform', 'scale(' + scale + ') translate(' + xNew + 'px, ' + yNew + 'px)')
                    .css('-moz-transform-origin', xImage + 'px ' + yImage + 'px')
                    .css('-o-transform', 'scale(' + scale + ') translate(' + xNew + 'px, ' + yNew + 'px)')
                    .css('-o-transform-origin', xImage + 'px ' + yImage + 'px')
                    .css('transform', 'scale(' + scale + ') translate(' + xNew + 'px, ' + yNew + 'px)');      
        });

Please, I need help to implement drag. Any suggestions, ideas, explanation, implementation is very well received.

Thanks.

PD. Sorry for my bad English.

Answer 1

This works for me in your drag switch statement:

     posX = ev.gesture.deltaX + lastX;
     posY = ev.gesture.deltaY + lastY;
     break;

Then this code should work for the transform:

"translate3d(" + posX + "px," + posY + "px, 0) ";