如何使用jQuery UI Resizable仅水平或垂直调整大小？

81

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

例：

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

但这确实很难看，尤其是当我必须以编程方式更改元素的高度时。

jquery jquery-ui jquery-ui-resizable

— 迭戈
source

145

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

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

您可以在这里尝试一下。

— 尼克Craver
source

7

我刚刚发现此解决方案的警告。作为内联样式完成时，它仍将放置宽度和高度。这给我带来了垂直解决方案的问题。调整大小后，将设置宽度，不再是100％（而是px值）。只要将其放在此处，以防其他人搜索并发现它。

— Fernker 2014年

@Fernker是的，这很痛苦。

— 2014年

如果为div赋予相同值的min-width和max-width属性，则可以获取百分比宽度。它不会被覆盖:)

— 塞巴斯蒂安2015年

2

移位拖动测试失败。

— 没必要，2016年

@nothingisnecessary不能描述“ shift-drag测试”吗？

— Jon z

27

尽管发帖人主要要求仅调整水平尺寸，但这个问题的确也要求垂直尺寸。

垂直情况有一个特殊问题：即使调整了浏览器窗口的大小，您可能也要设置一个相对宽度（例如50％）。但是，一旦您第一次调整元素的大小，jQuery UI就会以px为单位设置绝对宽度，并且相对宽度会丢失。

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

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

另请参见http://jsfiddle.net/cburgmer/wExtX/和jQuery UI resizable：单独使用东向手柄时的自动高度

— 汉堡
source

2

非常有趣，谢谢。我会记住的。我认为必须指出，可调整大小的元素必须由css设置其宽度，否则宽度调整后将丢失。看到这里jsfiddle.net/paska/wExtX/10

— 迭戈

1

这是我一直在寻找的解决方案。由于某些原因，即使该区域禁用了句柄，它的尺寸似乎仍然设置为px。如果您不使用此方法，则您将失去基于百分比的高度或宽度。

— Serhiy 2012年

实际上，这似乎在jQuery-ui 1.11.0中不起作用。直接在元素上设置的CSS宽度不取自初始宽度。我正在尝试将width设置为百分比，并且将其写入多个px。

— 2014年

谢谢，这个技巧也派上用场了，可以忽略在调整大小时保持宽高比的“ shift-drag”（对于水平调整大小，在和处理程序中将css设置height为）''resizestop

— 没必要，

18

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

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

这也适用于draggable（）。示例：http：//jsfiddle.net/xCepm/

— 一月
source

1

真的很丑！另外，正确的解决方案（我们应该使用的解决方案）是@Nick Craver's

— Diego，

1

我同意！:-)但是很高兴它可以与resizable（）和draggable（）一起使用。

— 1

1

我喜欢这个！除了在数学上很酷之外，它还将手柄留在右下角，从而在视觉上暗示该元素是可调整大小的。在公认的解决方案中，调整大小手柄是隐藏的，用户必须猜测底部边缘是一个热点。

— corwin.amber 2015年

这是完美的，原因是@ corwin.amber指出

— Lombas '16

那非常适合我的需求：{handles: 'se', grid: [10000, 1], autoHide: true}

— 电版

9

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

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

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
});

— 羔羊皮
source

难道不是也很丑吗？

— 迭戈

1

这样，用户可以看到他无法使用的手柄。

— nima 2012年

1

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

foo.first().resizable({
    resize: function(event, ui) { 
    ui.element.css('width','auto');
    },
});

— 法哈德·马利普（Farhad Malekpour）
source

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", '');
    }
});

0

Successfully working div position Vertically and horizontally
-------------------------------------------------------------

<head>

    <style>
    .resizable {
        height: 100px;
        width: 500px;
        background: #09C;
    }
    .resizable-x {
        height: 100px;
        width: 500px;
        background: #F60;
    }
    </style>

    <script>
     $(function() {

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

        $( ".resizable-x " ).resizable({
            grid: [1, 10000]
        });


        $( ".resizable" ).draggable();
        });

      });
        </script>`enter code here`
    </head>

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

— 维诺德·库马尔（Vinod Kumar）
source