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+unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---