JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<button>Resize!</button>
<div id="resizable"></div>
<div id="other" class="other"></div>
<div id="other2" class="other"></div>
<div id="other3" class="other"></div>

CSS

#resizable, .other {
    width: 100px;
    height: 100px;
    background: #ccc;
}
.other {
    background: #666;
    border: solid 1px white;
}

JavaScript

$.widget("ui.resizable", $.ui.resizable, {
    resizeTo: function(newSize) {
        var start = new $.Event("mousedown", { pageX: 0, pageY: 0 });
        this._mouseStart(start);
        this.axis = 'se';
        var end = new $.Event("mouseup", {
            pageX: newSize.width - this.originalSize.width,
            pageY: newSize.height - this.originalSize.height
        });
        this._mouseDrag(end);
        this._mouseStop(end);
    }
});
$("#resizable").resizable({
    alsoResize: '#other, #other2, #other3',
    resize: function(event, ui) {
        console.log('resize called');
    }
});
$('button').click(function() {
    $('#resizable').resizable("resizeTo", {
        height: Math.random()*100+50, 
        width: Math.random()*100+50 
    });
});