jQuery-UI-Resizable-Snap-extension icon indicating copy to clipboard operation
jQuery-UI-Resizable-Snap-extension copied to clipboard

Thanks! Here's an offering allowing adding of specific selectors

Open swampthang opened this issue 4 years ago • 0 comments

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.

swampthang avatar Dec 18 '20 14:12 swampthang