Question

我有两个可调整大小的元素，我需要它们来调整大小同步维护网格。似乎这两个选项不能一起工作。有什么想法吗？

演示：http://jsfiddle.net/CbYtT/2/ （尝试水平调整大小）

$(function() {

    $( "#this" ).resizable({
        alsoResize: "#that", 
        grid: 100

    });

    $( "#that" ).resizable({
        alsoResize: "#this", 
        grid: 100
    });

});

Answer 1

它不漂亮，但它有效。

    $( "#this" ).resizable({
        handles: "e",
        resize: function(event, ui) {
            $( "#that" ).width($(this).width());
            $( "#that" ).height($(this).height());
        },
        stop: function(event, ui) {
            $( "#that" ).width($(this).width());
            $( "#that" ).height($(this).height());
        },
        grid: 100
    });

    $( "#that" ).resizable({
        handles: "e",
        resize: function(event, ui) {
            $( "#this" ).width($(this).width());
            $( "#this" ).height($(this).height());
        },
        stop: function(event, ui) {
            $( "#this" ).width($(this).width());
            $( "#this" ).height($(this).height());
        },
        grid: 100
    });

JS小提琴的工作版

http://jsfiddle.net/Robodude/CbYtT/3/

Answer 2

如果您说要调整大小需要10个或更多元素，这可能会变得非常难看。相反，我们将调整大小指向要调整大小的所有元素共享的类。您可以从任何元素中调整大小。

  $( ".resizable" ).resizable({
    handles: "e",
    grid: 100,
    resize: function(event, ui) {
      $( ".resizable" ).width($(this).width());
    }
  });

http://jsfiddle.net/CbYtT/240/

jQuery UI可调整大小 - 与网格同步

2 个答案: