javascript - 进行自定义布局的更好方法

Question

我决定编辑这个问题，因为我意识到这并不清楚并且不能解决我的问题。然后我会提出一个不同的问题。

对于我的元素，我需要一个由自己的用户自定义的布局，以便用户可以移动、调整大小、添加或删除每个框。

看Example :

如果我只是在 .square 中添加一些边距或在 main 中添加填充，它会取消配置布局。我该怎么做，并在不取消配置布局的情况下继续。

JS:

$main_h = $("main").height();
$main_w = $("main").width();
$margin = parseFloat($("main").css("margin-right"));

$(".square").each(function(x) {

    $(eval("square"+x)).height(parseFloat(($main_h*$(this).attr("data-height"))-($margin*3)));

    $(eval("square"+x)).width(parseFloat(($main_w*$(this).attr("data-width"))-($margin*3)));

});

HTML:

<main>
    <section id="square0" class="square" data-width="0.2" data-height="0.5"></section>
    <section id="square1" class="square" data-width="0.2" data-height="0.5"></section>
    <section id="square2" class="square" data-width="0.2" data-height="0.5"></section>
    <section id="square3" class="square" data-width="0.2" data-height="0.5"></section>
    <section id="square4" class="square" data-width="0.2" data-height="0.5"></section>
    <section id="square5" class="square" data-width="0.2" data-height="0.5"></section>
    <section id="square6" class="square" data-width="0.8" data-height="0.5"></section>
</main>

我使用 data-width 和 data-height 因为我打算使用 salve 这些信息，之后可以加载然后再次获得相同的布局。

我希望我现在更清楚了，感谢您的支持!

Answer 1

我不知道这是不是你的意思，但布局可以单独通过 css 实现，这甚至可以从 ie7(甚至 6)开始

main {
    background: #eee;
    position: fixed;
    width: 800px;
    height: 800px;
    margin: 0px;
    padding: 0.5% 0 0 0.5%;
}

.square {
    float: left;
    position: relative;
    background: #fff;
    width: 32.833%;
    height: 32.833%;
    box-shadow: 1px 1px 1px rgba(0,0,0,.5);
    overflow: hidden;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    margin:0 0.5% 0.5% 0;
}

.square:hover {
    border: 3px solid rgba(153,217,234,.5);
}

https://jsfiddle.net/qbpr52h5/1/