javascript jQuery resizable() 动态 maxWidth 选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4688162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery resizable() dynamic maxWidth option
提问by Vitaliy Isikov
I have 3 columns that are resizable. When one is made wider, the one to it's left is made smaller. Essentially there are only 2 handles. Left col and Mid col. So when Mid col is made thinner, Right col expands accordingly. All three of them are contained with a 900px parent div, so the sum of all three is always 900. They have max and min widths set statically.
我有 3 列可调整大小。当一个变宽时，它左边的一个变小。基本上只有2个手柄。左上列和中上列。所以当 Mid col 变细时，Right col 会相应地扩大。他们三个都包含在一个 900px 的父 div 中，所以三个的总和总是 900。他们静态设置了最大和最小宽度。
My issue is that if you take the left handle and move it all the way to the right you're still able to use the right handle and expand the mid col past the edge of the parent div.
我的问题是，如果您使用左手柄并将其一直向右移动，您仍然可以使用右手柄并将中列扩展到父 div 的边缘。
I thought of a way to solve that issue by writing up a function that checks the widths of the columns and then subtracts left and right columns from the parent div width, I called it mWid. This leaves me with the number I want to set as the maxWidth for Mid col.
我想到了一种解决该问题的方法，即编写一个函数来检查列的宽度，然后从父 div 宽度中减去左列和右列，我将其称为 mWid。这给我留下了我想设置为 Mid col 的 maxWidth 的数字。
Now the issue is that mWid is not gettings updated for here "maxWidth: mWid"
现在的问题是这里的“maxWidth：mWid”没有更新 mWid
Here is what the function for the right handle looks like:
下面是右手柄的功能：
$(function() {
$("#midResizable").resizable({
handles: 'e',
containment: '#container',
maxWidth: mWid, // gets set once, but doesn't update! WHY?
minWidth: 195,
resize: function(event, ui) {
contWidth = $('#container').width()
newWidth = $(this).width()
leftWidth = $('#leftResizable').width()
rightWidth = $('#rightResizable').width()
$("#rightResizable").css("width", (contWidth-15)-(newWidth)-(leftWidth)+"px");
checkWid()
}
});
});
function checkWid() {
rightWidth = $('#rightResizable').width()
leftWidth = $('#leftResizable').width()
contWidth = $('#container').width()
mWid = (contWidth-15)-(rightWidth)-(leftWidth)
}
回答by Divi
Check this out: http://jqueryui.com/demos/resizable/#option-maxWidth
看看这个：http: //jqueryui.com/demos/resizable/#option-maxWidth
Looks like maxWidth: mWid, only gets called on init.
看起来像 maxWidth: mWid，只在初始化时被调用。
The maxWidth needs to be explicitly set after that, like this:
之后需要显式设置 maxWidth，如下所示：
$( "#midResizable" ).resizable( "option", "maxWidth", mWid );
回答by Mukesh Prabhakar
you can use the below code in start method of resizable. It will update the maxWidth and maxHeight dynamically whenever you try to resize the div element.
您可以在可调整大小的 start 方法中使用以下代码。每当您尝试调整 div 元素的大小时，它都会动态更新 maxWidth 和 maxHeight。
$('.droppedBtn').resizable({
.... //you resizable properties
start: function(event,ui)
{
$( ".CLASSNAME" ).resizable( "option", "maxWidth", layout.lWidth);
$( ".CLASSNAME" ).resizable( "option", "maxHeight", layout.lHeight);
},
stop: function(event,ui){
}
});
