6

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

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 的宽度更改为 about 30px。每次我开始拖动时都会发生这种情况。因此，每次都会丢失所需的宽度。改变宽度时，高度也会发生同样的事情。

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

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

4

5 回答 5

21

我认为这是box-sizing: border-box;和填充的组合。可调整大小的功能因此 css 属性而失败。

尝试将 box-sizing 更改为默认值 ( box-sizing: content-box)，或者为 padding 制作一个内部容器。

于 2012-06-06T09:50:37.700 回答
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); 
}

});
于 2013-01-08T05:45:47.643 回答
1

我知道这是一个老问题，但我遇到了同样的问题，因为我使用的是 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 小部件而无需更改核心库，但我还没有完全让它工作

如何扩展 jquery ui 小部件？(1.7)

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

于 2014-05-15T17:38:31.240 回答
0

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

在 resizeable 回调实现中： 1. 在 start 我们设置 box-sizing:content-box 2. 在 stop 我们将其设置回 box-sizing:border-box

也就是说我们在resize的时候临时把它设置为默认的content-box，以避免在使用border-box时resizeable引起的跳跃行为。

于 2015-10-26T00:53:35.100 回答
0

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

$( "#resizable" ).resizable({handles: 'e,w'});
于 2016-12-20T08:21:08.183 回答