How to make this resizable div, resizable from edges?
<p>I have a resizable and draggable box (grey in color). The box can be resized by stretching it from its corners.</p>

<p>Currently the box can be resized only by stretching from corners. I want to be able to resize it also from edges. 
Stretching from corners makes it scale uniformly across width and height. However, scaling across one edge, would scale it along length only. While, scaling it across another edge, would scale it along width only.
How do I achieve that?</p>

<p>My code is here. <a href="http://jsfiddle.net/akashdmukherjee/sa44ks9u/4/" rel="noreferrer">http://jsfiddle.net/akashdmukherjee/sa44ks9u/4/</a></p>

<p><strong>HTML:</strong></p>

<pre><code>  &lt;div id="outer" style="background-color: yellow; width: 600px; height: 400px; margin-left: 40px; margin-top: 50px;"&gt;


        &lt;div class="draggable_div rot"&gt;
            &lt;div class="rotatable"&gt;
                &lt;div id="inner" class="resizable" style="background-color: #3C3C3C; width: 300px; height: 300px;"&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

  &lt;/div&gt;

  &lt;div id="x_and_y_of_inner"&gt;Left: , Right: &lt;/div&gt;
</code></pre>

<p><strong>JS:</strong></p>

<pre><code>    $('.draggable_div').draggable();


    $( ".draggable_div" ).draggable({
      drag: function( event, ui ) {

        var left_most_cordinates = $("#outer").offset().left;
        var top_most_cordinates = $("#outer").offset().top;

        $("#x_and_y_of_inner").text( "Left: " + left_most_cordinates + " Top: " + top_most_cordinates );

        ui.position.left = Math.min( left_most_cordinates, ui.position.left );
        ui.position.top = Math.min( top_most_cordinates, ui.position.top );
      }
    });

    $('.resizable').resizable({
        aspectRatio: true,
        handles: 'ne, se, sw, nw'
    });



    $(document).on('mouseover', '.rot', function(){
        var tc = $(this);
        tc.rotatable({
            handle:tc.children('.rotate.left, .rotate.right')
        });
        return true;
    });
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>.draggable_div
{
    position: relative; 
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;   

    cursor: hand; 
    cursor: pointer;       
}

.resizable
{
    width: 50%;   
    border: 1px solid #bb0000;   
}
.resizable img
{
    width: 100%;   
}

.ui-resizable-handle 
{
    background: #f5dc58;
    border: 1px solid #FFF;
    width: 9px;
    height: 9px;

    z-index: 2;
}
.ui-resizable-se
{
    right: -5px;
    bottom: -5px;
}

.ui-rotatable-handle 
{
    background: #f5dc58;
    border: 1px solid #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor: pointer;

    height:        10px;
    left:          50%;
    margin:        0 0 0 -5px;
    position:      absolute;
    top:           -5px;
    width:         10px;
}
.ui-rotatable-handle.ui-draggable-dragging
{
    visibility:  hidden;
}
</code></pre>