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

[ceaped]

Hola
Esta función amplia y reduce la div "container", pero al mover box1 pierde su centro y al arrastrarlo y soltarlo se mueve a una posición diferente.

Código Javascript:

function applyScale(element){
            var scale = $(element).attr('data-val');
            $('.container').css({
                'transform' : 'scale('+scale+')',
                'transform-origin' : '0 0'
            });
        }
 

Gracias por su ayuda