Resizing whilst keeping ratio

This script resizes the specified DIV as you drag its bottom-right corner. The function "calculateNewSize" can do resizing login on the DIV. It should keep the aspect ratio of the element in future.

by julian_weinert

HTML

<div id="wrapper">
    <div id="dragger">
        <div id="handle"></div>
    </div>
</div>

CSS

#wrapper {
    width:600px;
    height:500px;
    background-color:#CACACA;
}
#dragger {
    top:10px;
    left:10px;
    width:200px;
    height:100px;
    position:absolute;
    background-color:white;
    border:1px solid black;
}
#handle {
    right:0px;
    bottom:0px;
    width:16px;
    height:16px;
    cursor:se-resize;
    position:absolute;
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsSAAALEgHS3X78AAAAsklEQVR4nNWQTYqEMBQG+77+8VD0LoaEkCDifTQa9S7VW6GdUadXs3iLWtRH8V7A65v7Sv7nA03T8OeBuq4ZhoF935/LVVXR9z3btj0vKMuSrutY15XHPxARvPfEGPHeIyL3C0QE5xwxRpxzHPlSLooCay3LsmCt5ciXBXmeY4xhnmeMMRz58gdZlqG1JoSA1poz/nEgTVOUUoQQUErxG3/ISZLQti3TNHGHTwvGceQuvwGzOfZWmm6CFQAAAABJRU5ErkJggg==');
}

JavaScript

$("#handle").bind('mousedown', draggerDown);
$("body").bind('mouseup', draggerUp);

function calculateNewSize(size) {
    // {currHeight, currWidth, newHeight, newWidth, offsetX, offsetY}
    //
    // DOING SOME COOL LOGIC HERE
    //
    
    var newWidth;
    var newHeight;

    if (Math.abs(size.offsetX) > Math.abs(size.offsetY)) {
        newWidth = size.currWidth + size.offsetX;
        newHeight = newWidth * (size.currHeight / size.currWidth);
    } else {
        newHeight = size.currHeight + size.offsetY;
        newWidth = newHeight * (size.currWidth / size.currHeight);
    }

    return {
        "height": newHeight,
        "width": newWidth
    };
}

function draggerDown() {
    event.stopPropagation();
    event.preventDefault();

    currentX = event.pageX;
    currentY = event.pageY;
    
    currentHeight = $("#dragger").height();
    currentWidth = $("#dragger").width();

    $("body").bind('mousemove', draggerMove);
}

function draggerMove() {
    var targetStyle = window.getComputedStyle(document.getElementById("dragger"));
    var newHeight = currentHeight + (event.pageY - currentY);
    var newWidth = currentWidth + (event.pageX - currentX);
    
    // AT THIS POINT, THE LOGIC COMES IN.
    // CUSTOMIZE 'calculateNewSize' function above

    var newSize = calculateNewSize({
        "currHeight": currentHeight,
        "currWidth": currentWidth,
        "newHeight": newHeight,
        "newWidth": newWidth,
        "offsetX": (event.pageX - currentX),
        "offsetY": (event.pageY - currentY)
    });
    
    currentHeight = newSize.height;
    currentWidth = newSize.width;
    
    newHeight = newSize.height;
    newWidth = newSize.width;

    // AT THIS POINT, THE LOGIC IS DONE.
    // SIZES SHOULD BE COOL NOW

    $("#dragger").css("height", newHeight + "px");
    $("#dragger").css("width", newWidth + "px");
    
    console.log($("#dragger").height());

    currentX = event.pageX;
    currentY = event.pageY;
}

function draggerUp() {
  ...