jQuery-UI-Resizable-Snap-extension
jQuery-UI-Resizable-Snap-extension copied to clipboard
Thanks! Here's an offering allowing adding of specific selectors
I know this is an old extension but it really helped me out. I have an application that contains MANY resizable elements, many of which I didn't want other resizable elements to snap. Also there are other elements that I wanted to include that were not resizable elements. So, I wanted to offer up an idea that allows snapping to specific elements. Pretty simple and is working for me.
After creating my resizable object per your example, I added an option to the draggable instance called snapSelectors
and am sending jquery selectors like this...
var snapSelectors = '.selector-1, .selector-2, .selector-3';
bEl.draggable('option', 'snapSelectors', snapSelectors);
I added these 3 lines to your extension at line 20...
var dInst = $(this).draggable('instance');
var snapSelectors = dInst.options.snapSelectors === undefined ? ':data(ui-resizable)' : dInst.options.snapSelectors;
var els = $(typeof snap == 'string' ? snap : snapSelectors);
I changed line 26 to be...
els.each(function () {
Mine is a pretty dynamic situation so I have a function named setSnapSelectors() which is called on mousedown so they're set before the start method runs. Hope this might help someone.