可以约束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

是的,可以通过使用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 2

这两个答案都有效,但是它们会在东部边界显示一个< - >光标,这让用户认为他们可以调整宽度,这是不幸的结果.我认为更好的匹配是在jQuery对象上调用它:

.resizable({handles:'s'})

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