突然想做一个能在一个范围内，添加删除DIV，然后还能改变DIV大小、颜色、位置，可以拖拽可以吸附这么一个东西，网上找到很多独立的，比如拖拽，比如吸附，比如范围内拖拽等，我想把这些功能整合到一起。

好，现在就开始吧

准备原料：

1.新建一个html文件：template_index.html

2.引入jquery.js（使用jquery），jquery-ui.js（用他里面的一个自动吸附功能），jquery.colorpicker.js（颜色选择插件）

3.新建一个js：templateModel.js，并且在页面引入（定义页面调用方法）

编写主页面template_index.html，布局一下页面，上方显示布局功能按钮，右边显示对div的操作功能，还有中间的显示区域。

加入三个div，分别对应上方，中间还有上方。

然后我们写个样式表，把这三个DIV按照上中右进行排版

布局后的界面大概是这样

现在界面布局大致完成了，下面我们把需要的一些操作按钮加到这几个区域里，然后就可以开始写代码了！

我们要对DIV进行的布局操作有：左右对齐，顶端低端对齐，宽度高度相同，大小相同

我们要对DIV进行的编辑操作有：删除，添加，内容修改，文字对齐方式，字体大小，DIV大小，坐标显示，边框圆角样式

加入后效果图大概如下，是不是感觉很高大上？哈哈。

OK，今天先到这，明天开始加功能。