onresize jQuery plugin

jQuery encapsulated of cross browser element resize event using a hack involving scroll events.

by Chris Ackerman

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://rawgithub.com/ChrisAckerman/jquery-onresize/master/jquery.onresize.min.js"></script>
<div>Width: <span id="width">50</span>, Height: <span id="height">50</span></div>
<div><i style="font-size: 75%;">click and drag inside the blue box to test.</i></div>
<div id="resizable"></div>

CSS

#resizable {
    position: relative;
    width: 50px;
    height: 50px;
    background: #00f;
}

JavaScript

$('#resizable').onresize(function(e) {
    $('#height').text($(this).height());
    $('#width').text($(this).width());
});

// drag to resize

var height;
var width;

$('#resizable').on('dragstart', function(e) {
    var el = $(this);
    height = el.height();
    width = el.width();
});

$('#resizable').on('drag', function(e) {
    $(this).css({
        height: Math.max(10, height + e.deltaY) + 'px',
    	width: Math.max(10, width + e.deltaX) + 'px'
    });
});

// drag* events

var dragging = false;
var dragElement = null;
var dragStart = { x: 0, y: 0 };

$(window).on('mousedown', function(e) {
    dragging = true;
    dragElement = $(e.target);
    dragStart.x = e.pageX;
    dragStart.y = e.pageY;
    
    dragElement.trigger('dragstart');
    
    $(window).disableSelection();
});

$(window).on('mousemove', function(e) {
    if (!dragging) {
        return;
    }
    
    var evt = $.Event('drag', {
        deltaX: e.pageX - dragStart.x,
        deltaY: e.pageY - dragStart.y
    });
	
	dragElement.trigger(evt);
});

$(window).on('mouseup', function(e) {
    dragging = false;
    
	dragElement.trigger('dragstop');
    
    $(window).enableSelection();
});