这里我拉供的简单版的实现给你吧，大概流程是这样的：

1，先规定好CSS和HTML结构：一般都是流式布局，包括最外面的容器，然后里面有行、列、内容盒子，行和内容盒子的宽度是100%，列的宽度需要你在操作的时候用Javascript去动态计算出来。列都是向左浮动  都是要被包含在行里面的，因为行这个容器要清除列里面的浮动，最后是存放展示内容的具体的盒子放进列里面，内容盒子是不浮动的。 大致如下(以下只列出问分，可以有更多行更多列的啦)：

<div class="wrap">
    <div class="row clearfix">
        <div class="col">
            <div class="box"></div>
        </div>
        <div class="col">
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </div>
</div>

2，拖拽操作，至于JS拖拽事件什么的你就自己去找资料看啦，这里需要说以下几点：

      一，当你拖拽行你就在.wrap里面监听位置，然后判断他是在哪一行的前面，当鼠标松开时，你就把这行的div插到前面去就行了；

      二，当你拖拽列时，你就监听.row，看它是被拉到了哪 一行的哪个位置，然后放进去，然后根据那一行的列数来动态计算该行的所有列的宽度；

      三，当你拖拽内容盒子的时候，你就监听.col，看是被拉到了哪一行的哪一列的哪个位置，然后放进去。

3，结构保存，关于保存的话其实方式很多，也跟你的实现有关系啦，这里说一下比较笨也比较容易实现的方法：你可以遍历这些Dom结构，然后变成字符串提交到后台。

大概思路就是这样，真正做的时候，你还得考虑比较多细节的东西。