使用jQuery实现可调整大小的元素网格——有没有库支持这个功能?

Grid of resizable elements with jQuery - are there any libraries that would support this?

本文关键字：有没有 支持 功能 网格 可调整 实现 jQuery 元素 使用      更新时间：2023-09-26

我希望创建一个3x3的元素网格，固定在一个更大的父元素内部，这些元素都是可调整大小的。问题是，我希望所有9个子元素始终占据父元素的100%的空间。因此，如果我增加左上角元素的宽度，那么同一行的两个元素的大小应该减小以适应它。例如,

A B C
D E F
G H I

在上面的网格中，我们假设每个字母是30px × 30px。如果我拖动调整A的大小并将宽度增加到60px，那么我希望B和C各减少15px。

显然，这可以使用原生jQuery UI来完成。在resizable()初始化中为每个子元素设置一个包含参数，就可以将它们全部绑定到父元素中。还可以检查每当元素更改时触发的resize事件，以确定每个相邻子元素可能需要移动的时间。问题是，这将是一个相当复杂的算法。这是可行的，但需要大量的工作。在我重新发明轮子之前，我想看看是否存在支持此任务的库/插件，或者有人知道类似的开源项目?

谢谢。

还没见过这样的框架，但听起来是个有趣的想法。还有很多事情需要考虑，比如其他字母应该如何表现?

play a little:

    $('.row div:odd').css('background','blue');
    $('div').click(function(){
        var orgWidth = $(this).width();
        $(this).width(orgWidth+100);
        var gridwith = $(this).parent().width();
        var columns = 3;
        var importantClass = '.'+$(this).attr('class');
        var resizeTo = $(this).width();
        var columnsWidth = (gridwith-resizeTo)/(columns-1);
        $(this).parent().children().not(importantClass).width(columnsWidth);
        return false;
    });

和

<div class="row">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
</div>
<div class="row">
    <div class="col4"></div>
    <div class="col5"></div>
    <div class="col6"></div>
</div>
<div class="row">
    <div class="col7"></div>
    <div class="col8"></div>
    <div class="col9"></div>
</div>

和

    .row {width:600px; overflow:auto; divst-style:none;}
    .row div {float:left; width:200px; height:200px; background:red;}
    .row div.odd {background:blue;}

这将如何作用于我们所考虑的?

相关文章：