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

2017-02-05 09:09 出处:360java.com 作者:360java  阅读()
类似与http://layoutit.justjavac.com/ (bootstrap 的可视化布局)要这种设计的思路,比如,鼠标移过去获取当前所在的元素,显示编辑按钮,编辑完成后布局结构怎么保存下...
类似与在线可视化布局的原理是什么?http://layoutit.justjavac.com/ (bootstrap 的可视化布局)
要这种设计的思路,比如,鼠标移过去获取当前所在的元素,显示编辑按钮,编辑完成后布局结构怎么保存下来!
最佳答案

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

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

 

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

  

分享到:

相关文章

发表评论(共条评论)愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

Copyright (C) java学习 360java 360java.com, All Rights Reserved.

苏ICP备16022210号