如何缩放鼠标位置以保持形状位置

Question

im'目前正在编写一个简单的脚本来通过鼠标滚轮缩放div。 This is my current jsfiddle

var obj = {startPositionX:0,startPositionY:0};
var scale=0.3;
var translate = {x:0,y:0};
var container = false,
    grid = 20;
var move = $('#move');
var container =$('#container');
container.on("mousedown",function(e){


    obj.startPositionX=(e.pageX-translate.x * scale);
    obj.startPositionY=(e.pageY-translate.y * scale);
    $(document).on("mousemove",function(e){
        translate.x=(e.pageX-obj.startPositionX) / scale;
        translate.y=(e.pageY-obj.startPositionY) / scale;

        var minX = ( container.width() / scale ) - (move.width() );
        var minY = ( container.height() / scale ) - (move.height() );

        translate.x = Math.max(0, Math.min( minX, translate.x));
        translate.y = Math.max(0, Math.min( minY, translate.y));

        var scaledGrid = grid / scale;
        translate.x = Math.round( translate.x / scaledGrid ) * scaledGrid;
        translate.y = Math.round( translate.y / scaledGrid ) * scaledGrid;

        $('#move').css('transform','scale('+scale+') translate('+translate.x +'px, '+translate.y+'px)');

    });

}).on("wheel", function(event) {
    var original = event.originalEvent;
    var scaleDelta = Math.max(-1, Math.min(1, original.wheelDelta || -original.detail));
    var targetScale = scale + (scaleDelta * .1) ;

    var origin = {
        x : (event.pageX - translate.x * scale),
        y : (event.pageY - translate.y * scale)
    };

    var xPercent = (origin.x - translate.x) / move.width()
    var yPercent = (origin.y - translate.y) / move.height();


    // I need to center it here


    $('#move').css('transform','scale('+targetScale+') translate('+translate.x +'px, '+translate.y+'px)');
    scale = targetScale;
    $('#move').html(scale.toFixed(1));

});
$(document).on("mouseup",function(){
    $(this).off("mousemove");
});

在缩放之前将灰色方块拖动到另一个位置然后缩放。 如何在缩放后保持灰色div位置？