jquery - jQuery UI Resizable - 与网格同步

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/