可以约束jQuery调整大小到x或y轴，如拖动约束？

Question

此jQuery允许您约束拖动移动，使其仅在指定的轴上发生：

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

请参阅：http://jqueryui.com/demos/draggable/#constrain-movement

这不是合法的jQuery，但我希望它是：

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

是否有可能阻止用户使#Container更宽，同时让她更高？

由于

Answer 1

这两个答案都有效，但是它们显示出＆lt; - ＆gt;的不幸后果。光标在东边界，使用户认为他们可能能够调整宽度。我认为更好的匹配是在jQuery对象上调用它：

.resizable({handles:'s'})

因为这将简单地消除改变宽度和光标的可能性。

Answer 2

是的，可以使用UI事件。沿x轴：

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

或沿y轴：

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

Answer 3

我发现在调整大小时只清除对象上的高度或宽度内联样式也有效。它还具有不受对象原始尺寸约束的额外好处（因为它们可能会根据内容而改变）

$("#Container").resizable({
    resize: function(event, ui) {
        $(this).css('height','');
    }
});

Answer 4

我看到两种方法可以做到这一点，一种比另一种更好。最好的一个：

1）将minWidth和maxWidth设置为相同的值（即您希望宽度保留的值）。

$('#theThing').resizable({ minWidth = 200, maxWidth = 200 });

2）创建一个固定宽度的父元素，并使其成为包含。我不知道这将如何在高度上起作用，但默认情况下，如果指定高度的div增长，则其内容会增加，因此它可能会起作用。