jQuery UI Resizable Snap Extension

Extension to the jQuery UI Resizable plugin for snapping while resizing.

by 20yco

HTML

<link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/1.7/themes/base/ui.resizable.css">
<h1><a href="https://github.com/polomoshnov/jQuery-UI-Resizable-Snap-extension">jQuery UI Resizable Snap extension</a></h1>
<h2>Extension to the jQuery UI Resizable plugin for snapping while resizing.</h2>
<h3>by Alexander Polomoshnov</h3> 
<h3>released under <a href="https://raw.github.com/polomoshnov/jQuery-UI-Resizable-Snap-extension/master/LICENSE.txt">the MIT license</a></h3> 

<p>Try resizing the boxes to see how they can snap each other.</p>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS

.box {
    position: absolute;
    width: 200px;
    height: 200px;
    background: silver;
}

.box:nth-of-type(1) {
    left: 150px;
    top: 270px;
    background: red;
}

.box:nth-of-type(2) {
    left: 250px;
    top: 370px;
    background: green;
}

.box:nth-of-type(3) {
    left: 350px;
    top: 470px;
    background: blue;
}

JavaScript

(function ($) {
    $(document).ready(function () {
        $('.box').draggable({snap:true}).resizable({ 
            handles: 'all',
            snap: true
        });
    });
})(jQuery);    

/**
 * "jQuery UI Resizable Snap" - Extension to the jQuery UI Resizable plugin for snapping while resizing.
 *
 * @copyright       Copyright 2011, Alexander Polomoshnov
 * @license         MIT license (https://raw.github.com/polomoshnov/jQuery-UI-Resizable-Snap-extension/master/LICENSE.txt)
 * @link            https://github.com/polomoshnov/jQuery-UI-Resizable-Snap-extension
 * @version         1.8
 */
(function(a){function f(b,c,d){var e=a.ui.resizable.prototype[b];a.ui.resizable.prototype[b]=function(){if(d)d.apply(this,arguments);e.apply(this,arguments);if(c)c.apply(this,arguments)}}function e(a){return parseInt(a.css("margin-top"),10)||0}function d(a){return parseInt(a.css("margin-left"),10)||0}function c(a){return a.sort(function(a,b){return!a?1:!b?-1:Math.abs(a)-Math.abs(b)})[0]}function b(a,b,c){return Math.abs(a)<c?-a:Math.abs(b)<c?-b:0}a.extend(a.ui.resizable.prototype.options,{snapTolerance:20,snapMode:"both"});a.ui.plugin.add("resizable","snap",{start:function(){var b=a(this),c=b.data("ui-resizable"),f=c.options.snap;c.ow=c.helper.outerWidth()-c.size.width;c.oh=c.helper.outerHeight()-c.size.height;c.lm=d(b);c.tm=e(b);c.coords=[];a(typeof f=="string"?f:":data(ui-resizable)").each(function(){if(this==c.element[0]||this==c.helper[0])return;var b=a(this),f=b.position(),g=f.left+d(b),h=f.top+e(b);c.coords.push({l:g,t:h,r:g+b.outerWidth(),b:h+b.outerHeight()})})},resize:function(){var d=[],e=[],f=[],g=[],h=a(this).data("ui-resizable"),i=h.axis.split(""),j=h.options.snapTolerance,k=h.options.snapMode,l=h.position.left+h.lm,m=l-j,n=h.position.top+h.tm,o=n-j,p=l+h.size.width+h.ow,q=p+j,r=n+h.size.height+h.oh,s=r+j;a.each(h.coords,function(){var...