Hi,
Where can I find this overlap() function which is used as overlap(
rs_pos.left, rs_pos.top, rs_width, rs_height, $(this).position().left,
$(this).position().top, $(this).width(), $(this).height() ).
Please reply me as soon as possible.
Thanks in Advance.
gdewitt wrote:
>
> I was trying to solve a very similar problem, where I have a group of divs
> and images that are resizable, and I want to prevent them from
> overlapping. I was not able to cancel the resize, but I was able to snap
> the resizables back to their pre-resized state using the stop event.
> Here's what I did:
>
> function snapBackOnOverlap(event, ui) {
> var rs = this;
> var rs_pos = $(rs).position();
> var rs_width = $(rs).width();
> var rs_height = $(rs).height();
> var overlapFound = false;
> //layout_area is a div that contains all the resizables
> $(".layout_area").children().each( function() {
> if(!overlapFound && this != rs && overlap( rs_pos.left,
> rs_pos.top, rs_width, rs_height, $(this).position().left,
> $(this).position().top, $(this).width(), $(this).height() ) )
> overlapFound = true;
> });
> //console.log('stop from ' + ui.originalSize.width + 'x' +
> ui.originalSize.height + ' to ' + ui.size.width + 'x' + ui.size.height);
> if(overlapFound) {
> $(this).css( { 'width' : ui.originalSize.width + 'px', 'height' :
> ui.originalSize.height + 'px', 'top' : ui.originalPosition.top + 'px',
> 'left' : ui.originalPosition.left + 'px' } );
> //you may or may not need this line - my resizables are images so I need
> to adjust the image inside the resizable div
> $(this).children(":first").css( { 'width' : ui.originalSize.width
> + 'px', 'height' : ui.originalSize.height + 'px', 'top' :
> ui.originalPosition.top + 'px', 'left' : ui.originalPosition.left + 'px' }
> );
> }
> }
>
> //and when I create my resizable I use this:
> .resizable({
> stop : snapBackOnOverlap,
> containment : 'parent',
> handles : "all",
> autoHide : true,
> knobHandles : true
> })
>
> Michael Pridemore wrote:
>>
>>
>> I'm working with a grid of divs that are both resizable and draggable.
>> I want to limit the resizing so you can't make one div overlap
>> another. Kind of like containment, except the other objects are
>> siblings to the one being resized, not parents.
>>
>> The only thing I can think of would be to monitor the resize events
>> during the resize and cancel it if the mouse moves into another div.
>> But I can't figure out how one would programmatically cancel the
>> resize.
>>
>> Any ideas?
>>
>> --~--~---------~--~----~------------~-------~--~----~
>> You received this message because you are subscribed to the Google Groups
>> "jQuery UI" group.
>> To post to this group, send email to jquery-ui@googlegroups.com
>> To unsubscribe from this group, send email to
>> jquery-ui+unsubscr...@googlegroups.com
>> For more options, visit this group at
>> http://groups.google.com/group/jquery-ui?hl=en
>> -~----------~----~----~----~------~----~------~--~---
>>
>>
>>
>
>
--
View this message in context:
http://old.nabble.com/Is-it-possible-to-programmatically-cancel-a-resize--tp23470281s27240p29725117.html
Sent from the jQuery UI Discussion mailing list archive at Nabble.com.
--
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to jquery...@googlegroups.com.
To unsubscribe from this group, send email to
jquery-ui+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en.
