82

我发现的唯一解决方案是使用当前值设置最大和最小高度或宽度。

例子：

foo.resizable({ 
  maxHeight: foo.height(), 
  minHeight: foo.height() 
});

但这真的很难看，特别是如果我必须以编程方式更改元素的高度。

4

7 回答 7

147

您可以将调整大小handles选项设置为仅显示在左侧和右侧（或东/西），如下所示：

foo.resizable({
    handles: 'e, w'
});​

你可以在这里试一试。

于 2010-09-02T14:43:58.140 回答
27

虽然海报主要要求仅水平调整大小，但问题确实也要求垂直。

垂直大小写有一个特殊问题：您可能已经设置了一个相对宽度（例如 50%），即使在调整浏览器窗口大小时也希望保持该宽度。但是，一旦您第一次调整元素大小并且相对宽度丢失，jQuery UI 就会以 px 为单位设置绝对宽度。

如果发现以下代码适用于此用例：

$("#resizable").resizable({
    handles: 's',
    stop: function(event, ui) {
        $(this).css("width", '');
   }
});

另请参阅http://jsfiddle.net/cburgmer/wExtX/和jQuery UI resizable : auto height when using east handle only

于 2011-06-02T18:15:40.910 回答
17

一个非常简单的解决方案：

$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical

这也适用于 draggable() 。示例：http: //jsfiddle.net/xCepm/

于 2012-02-10T10:41:51.653 回答
9

解决方案是配置您的可调整大小，以便取消您不想要的尺寸更改。

这是一个仅垂直调整大小的示例：

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
});
于 2010-10-29T11:55:40.910 回答
1

我想在浏览器重新调整大小时允许重新调整宽度，但在用户更改元素大小时不允许，这很好用：

foo.first().resizable({
    resize: function(event, ui) { 
    ui.element.css('width','auto');
    },
});
于 2013-11-20T00:29:10.847 回答
0

对我来说，具有句柄和resize处理程序的解决方案工作正常，因此用户可以看到句柄但只能水平调整大小，类似的解决方案应该适用于垂直。如果没有右下角的处理程序，用户可能不知道他可以调整元素的大小。

如果元素从初始状态更改了它的大小，则在使用ui.size.height = ui.originalSize.height;时它将无法正常工作。

foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        $(this).css("height", '');
    }
});

为了获得更好的性能$(this)，可以删除：

var foo = jQuery('#foo');
foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        foo.css("height", '');
    }
});
于 2014-03-13T13:19:58.850 回答
0

垂直和水平成功地工作 div 位置

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  <style>
    .resizable {
      height: 100px;
      width: 500px;
      background: #09C;
    }
    
    .resizable-x {
      margin-top: 5px;
      height: 100px;
      width: 500px;
      background: #F60;
    }
  </style>

  <script>
    $(function() {
      $(".resizable").resizable({
        grid: [10000, 1]
      });
      $(".resizable-x ").resizable({
        grid: [1, 10000]
      });
      $(".resizable").draggable();
    });
  </script>
</head>

<body>
  <div class="resizable"></div>
  <div class="resizable-x"></div>
</body>

于 2014-07-09T06:02:26.173 回答