Question

This jQuery lets you constrain drag movement so it occurs only on the axis specified:

$("#draggable2").draggable({ axis: 'x' });

See: http://jqueryui.com/demos/draggable/#constrain-movement

This is not legal jQuery but I wish it were:

$("#Container").resizable({ minHeight: 150, containment: {axis:'y' } });

Is it possible to prevent the user from making #Container wider while allowing her to make it taller?

Thanks

Answer 1

Yes, it’s possible by using UI events. Along the x-axis:

$("#Container").resizable({
    resize: function(event, ui) {
        ui.size.width = ui.originalSize.width;
    }
});

or along the y-axis:

$("#Container").resizable({
    resize: function(event, ui) {
        ui.size.height = ui.originalSize.height;
    }
});