drag and drop varia tamaño

[ceaped]

Buenas noches
Tengo este ejemplo:

Código Javascript:

$(function(){
            $('.box1').draggable({
                revert: 'invalid'
            });
            $('.box2').droppable({
                accept: '.box1',
                drop: function(event, ui){
                    var $this = $(this);
                    ui.draggable.position({
                        my : "center",
                        at : "center",
                        of: $this,
                        using: function(pos){
                            $(this).animate(pos, 200, "linear");
                        }
                    });
                }
            });
            
            
function applyScale(element){
var scale = $(element).attr('data-val');                
$('.container').css({
'transform' : 'scale('+scale+')',
'transform-origin' : '0 0'
});
}
            
$("input[type='button']").on("click", function(i,e){
applyScale($(this)[0]);
});
 
});
 

Código CSS:

.container {
    border: 1px solid #999;
    position: relative;
    width: 400px;
    height: 400px;
    margin: 0 auto;
    background-color: #CCC;
    }
 
.box {
    color: #FFF;
    position: absolute;
    right: 0;
    text-align: center;
    background-color: #FF0000;
    }
 
.box.box1 {
    width: 80px;
    height: 80px;
    bottom: 0;
    line-height: 80px;
    z-index: 1;
    background-color: #28ED48;
    cursor: pointer;
    }
 
.box.box2 {
    background-color: #F3662F;
    height: 100px;
    left: 0;
    line-height: 100px;
    top: 0;
    width: 100px;
    z-index: 0;
    }
 
input[type="button"] {
    margin: 0 5px 5px 0;
    }
 

Código HTML:

<input type="button" id="scale1" value="Apply Scale 0.5" data-val="0.5"></input>
    
    <input type="button" id="scale2" value="Apply Scale 1.5" data-val="1.5"></input>
    
    <input type="button" id="scale0" value="Apply Scale 1" data-val="1"></input>
    
    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
    </div>
 

Cuando varía la escala el centro del box al arrastrarse al otro box cambia.

¿Cómo hago para que siempre al arrastrar el box no se desajuste su centro?.

Gracias por su ayuda