Drag and Zoom with Hammer js

I have a problem with dragging and dropping an image. I used a combination of these solutions to implement a pointer-oriented scalable zoom that works as needed: solution 1 , solution 2 .

The problem occurs when I try to implement drag. I could not find the 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 implementing drag and drop. Any suggestions, ideas, explanations, implementation are very well received.

Thank.

PD. Sorry for my bad english.