jQuery UI:我的调整大小功能无法正常工作

时间:2017-06-06 07:37:37

标签: javascript jquery html css jquery-ui

我想知道我的调整大小功能没有正常工作,因为我预计意味着问题是当我调整div(增加填充)并离开它时,当我再次尝试调整大小时填充缩小。

注意:我正在增加填充而不是高度。

$( function() {
    $( "#resizable" ).resizable({
      resize: function( event, ui ) {
        var originalHeight = ui.originalSize.height;
        var newHeight = ui.size.height;
        var pad = 5;
        if (originalHeight < newHeight) {
          pad = newHeight - originalHeight;
        }
        $(this).css({'padding': pad, 'height': 200, 'width': 400});
      }
    });
 });

My fiddle link

1 个答案:

答案 0 :(得分:0)

是的@Botimoo似乎是对的。您应该考虑使用填充之外的其他内容进行定位。但是如果你想坚持填充

,这样的事情可能接近你想要的

https://jsfiddle.net/6rh7emog/5/

<div id="resizable" class="ui-widget-content">
  <div id="wrapper">
    <h3 class="ui-widget-header">Resizable</h3>
  </div>

$( function() {
    $( "#resizable" ).resizable({
      aspectRatio: true,
      resize: function( event, ui ) {
        var originalHeight = ui.originalSize.height;
        var newHeight = ui.size.height;
        $('#wrapper').css({
              'padding': newHeight - 200 
        });
      }
    });
 });