首页 新闻 赞助 找找看

在线可视化布局的原理是什么?

0
[已解决问题] 解决于 2014-08-13 11:12
类似与http://layoutit.justjavac.com/ (bootstrap 的可视化布局)
要这种设计的思路,比如,鼠标移过去获取当前所在的元素,显示编辑按钮,编辑完成后布局结构怎么保存下来!
实习研究僧的主页 实习研究僧 | 初学一级 | 园豆:12
提问于:2014-05-09 13:37
< >
分享
最佳答案
1

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

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结构,然后变成字符串提交到后台。

 

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

  

奖励园豆:5
zernmal | 菜鸟二级 |园豆:312 | 2014-05-18 11:34
其他回答(2)
0

直接保存你编辑好的那个html页不就可以了

刘宏玺 | 园豆:14020 (专家六级) | 2014-05-09 16:14
0

XML

男人要爽 | 园豆:6 (初学一级) | 2014-05-09 16:33

可否说下具体做法,感激不尽

支持(0) 反对(0) kaolasz | 园豆:5 (初学一级) | 2014-05-10 09:58
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册