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

【问题标题】：possible to constrain jQuery resize to x or y axis, like drag constrain?可以约束 jQuery 调整大小到 x 或 y 轴，如拖动约束？
【发布时间】：2011-02-18 19:09:29
【问题描述】：

这个 jQuery 让您可以限制拖动移动，使其只发生在指定的轴上：

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

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

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

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

是否有可能阻止用户使#Container 变宽，同时允许她变高？

谢谢

【问题讨论】：

标签： jquery resize axis constraints

【解决方案1】：

是的，可以通过使用 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;
    }
});

【讨论】：

这可能不再起作用了。我尝试在 resize 事件中对 ui.size.width 进行硬编码，发现它被忽略了。也许对 jquery 的一些更改破坏了这个解决方案。
原来这将适用于 jquery ui 1.9 但不适用于 1.10；我已将其作为错误提交

【解决方案2】：

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

.resizable({handles:'s'})

因为这只会消除更改宽度和光标的可能性。

【讨论】：

喜欢这个答案。用户界面友好，这是重点。如果您曾经决定使用 ghost 或 helper，其他方法会误导并可能使您的用户感到沮丧。这是简单、优雅的，而且不是处理器密集型的。另请注意，如果您愿意，您可以使用{handles: 's, n'} 或{handles: 'n'}，您不仅可以调整底部边缘的大小
感谢这个答案竖起大拇指！
这也适用于引导程序，接受的答案会导致每次调整大小时调整大小的区域都会变小。

【解决方案3】：

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

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

【讨论】：

这是一个很好的解决方案。我有一个非常高的可调整大小，所以我只在se 角上显示手柄，否则会被错过。考虑到在调整大小时内容重排，设置最大和最小高度似乎不起作用。
这里唯一可行的解决方案，考虑到您使用的是最新版本的 jQuery UI。谢谢。

【解决方案4】：

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

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

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

2) 创建一个具有固定宽度的父元素并使其成为容器。我不知道这将如何在高度上起作用，但默认情况下，没有指定高度的 div 如果其内容会增长，那么它可能会起作用。

【讨论】：

感谢托马斯的建议。不幸的是，当#theThing 包含在#Container 中并且#Container 没有明确的高度时： $("#theThing").resizable({ minHeight: 150, containment: '#Container' }) 那么theThing 不能垂直调整大小。 #Container 根本不会超过它首先渲染 #theThing 所需的高度。
@Tim，您是否尝试过另一种方式 - 将最小和最大宽度设置为相同的值？这就是我要做的，而不是拥有一个容器。