JQuery resizable snap to other resizable objects' borders?

Question

I wonder why they didn't develope JQuery resizable with option to snap the resizing object to others (instead of snapping to grid) like draggable ? Does anyone know such a plugin to achieve this ? Thanks.

Plosive

Answer 1

Think this should do the trick:

https://github.com/polomoshnov/jQuery-UI-Resizable-Snap-extension

Garvin

Oh my, that all what I needed! Thanks! – Plosive

@Thomas Thanks for the heads up! Updated. – Garvin

Does it only snap to other draggable elements? – Maceio

Works wondefully! I'm on jQuery UI 1.11.4, so don't worry about @RolandSoós comment (unless you're <1.8 maybe?). I had to tweak the code a little to get it to also work when the objects are not in the same parent absolute-positioning parent (which is how $.ui.draggable.snap behaves). That change is here in case anyone else has a more complex layout they need to do snapping on: github.com/polomoshnov/jQuery-UI-Resizable-Snap-extension/pull/… – Tennyson

Answer 2

For me this javascript add-on provided didn't work, maybe because it's some years outdated. Instead I found a simpliest solution that uses only an original attribute from the JQuery-UI's library.

On the dialog you want to snap, just make something like:

$('.your-dialog-filter').dialog().parents('.ui-dialog').draggable('option', 'snap', true);

Simple like this.

More info and demo: https://jqueryui.com/draggable/#snap-to

Verduzco

Question is about resizable, draggable snap is easy one. – Tjaden