Question

我在调整大小时遇到问题。我正在使用带有以下css的div上的JQuery .resizable()：

div#resizable {
   float: left;
   border: solid 1px white;
   box-shadow: 0px 0px 0px 1px #F2F2F2;
   box-sizing: border-box;
   padding: 15px;
}

它还包含许多其他div和其他东西。我以这种方式附加resizable：

$( "#resizable" ).resizable({ minWidth: 200, 
                              maxWidth: 597, 
                              minHeight: 240,
                              resize: widgetResizeListener 
                            });

widgetResizeListener()暂时只在控制台中记录一些内容。

现在当我试图通过拖动它的ui-resizable-s侧来改变div的高度时，它会自动将div的宽度改变大约30px。每次我开始拖动时都会发生这种情况。因此每次都会丢失所需的宽度。更改宽度时，高度会发生同样的情况。

现在我想知道是不是因为我的div有填充？因为之前，当没有填充时，这种“跳跃”的事情就不会发生。现在我无法删除填充，因为它确实需要。那么这个问题怎么解决呢？我的意思是有没有办法在 JQuery resizable（）中包含填充？

任何帮助将不胜感激，谢谢...

Answer 1

我认为这是box-sizing: border-box;和填充的组合。 resizable函数因此css属性而失败。

尝试将框大小更改为默认值（box-sizing: content-box），或为填充创建内部容器。

Answer 2

如果删除box-sizing属性是不可能的，就像我的情况一样，我发现了一个可能有帮助的不同解决方案。这不是最漂亮的但是有效。没有测试确切的代码，但想法是你必须在调整大小时添加填充宽度，然后在停止时将其更改回来。重要提示：如果元素可能没有填充，则必须添加if语句以断定是否设置了填充值

var padLeft, padRight, padTotal; // define vars 

$('#resize').resizable({

start: function(event,ui){
   padLeft = this.css('padding-left').replace('px','');
   padRight = this.css('padding-right').replace('px','');
   padTotal = parseFloat(padLeft + padRight);
   ui.size.width = ui.size.width + padTotal;
},
resize: function(event,ui){
   ui.size.width = ui.size.width + padTotal;
},
stop: function(event,ui){
   this.css('width',ui.size.width - padTotal); 
}

});

Answer 3

我知道这是一个老问题，但我遇到了同样的问题，因为我正在使用Foundation库，它将box-sizing边框应用于所有元素。您可以通过在jQuery UI可调整大小的小部件代码中编辑一行来修复它。修复在

_mouseCapture

我应用了以下代码

var padLeft = el.css('padding-left').replace('px','');
var padRight = el.css('padding-right').replace('px','');
var padTotal = parseFloat(Number(padLeft) + Number(padRight));

this.originalSize = this._helper ? { width: el.outerWidth() + padTotal, height: el.outerHeight() + padTotal } : { width: el.width() + padTotal, height: el.height() + padTotal};

您可能也可能不必像我一样编辑高度值。根据我应用可调整大小的div，即每个网格元素的基础容器，或嵌套在其中的div，我必须删除或包括高度调整。

您可以在这里查看如何编辑jQuery小部件而无需更改核心库但我还没有完成这项工作

How to extend a jquery ui widget ? (1.7)

我在可调整大小的对象函数中进一步发现错误。如果有人对此有任何建议，我会很高兴听到他们。

Answer 4

我们在使用box-sizing：border-box是必须的情况下使用的一种替代方法如下。

在可调整大小的回调实现中： 1.在开始时，我们设置box-sizing：content-box 2.在停止时，我们将其设置回box-sizing：border-box

换句话说，我们在调整大小时暂时将其设置为默认内容框，以避免在使用border-box时由resizeable引起的跳跃行为。

Answer 5

您可以使用“处理”参数来处理此问题。像这样：

$( "#resizable" ).resizable({handles: 'e,w'});

调整高度时，JQuery UI resizable（）会更改宽度

5 个答案: