1.先clone项目到本地。
2.git reset --hard commit 命令可以使当前head指向某个commit。
完成html的基本布局
点击复制按钮来复制整个commit id。然后在项目根路径下运行 git reset 。用浏览器打开index.html来预览效果，该插件的html主要结果如下：
<!-- 节点容器 --> <div class="dragrid"> <!-- 可拖拽的节点，使用translate控制位移 --> <div class="dragrid-item" style="transform: translate(0px, 0px)"> <!-- 通过slot可以插入动态内容 --> <div class="dragrid-item-content"> </div> <!-- 拖拽句柄 --> <div class="dragrid-drag-bar"></div> <!-- 缩放句柄 --> <div class="dragrid-resize-bar"></div> </div> </div>
使用vue完成nodes简单排版
先切换commit，安装需要的包，运行如下命令：
git reset --hard 83842ea107e7d819761f25bf06bfc545102b2944 npm install <!-- 启动，端口为7777，在package.json中可以修改 --> npm start
这一步一个是搭建环境，这个直接看webpack.config.js配置文件就可以了。
另一个就是节点的排版（layout），主要思路是把节点容器看成一个网格，每个节点就可以通过横坐标(x)和纵坐标(y)来控制节点的位置，左上角坐标为(0, 0)；通过宽(w)和高(h)来控制节点大小；每个节点还必须有一个唯一的id。这样节点node的数据结构就为：
{
id: "uuid",
x: 0,
y: 0,
w: 6,
h: 8
}
其中w和h的值为所占网格的格数，例如容器是24格，且宽度为960px，每格宽度就为40px，则上面节点渲染为240px * 320px, 且在容器左上角。
来看一下dragrid.vue与之对应的逻辑：
computed: {
cfg() {
let cfg = Object.assign({}, config);
cfg.cellW = Math.floor(this.containerWidth / cfg.col);
cfg.cellH = cfg.cellW; // 1:1
return cfg;
}
},
methods: {
getStyle(node) {
return {
width: node.w * this.cfg.cellW + 'px',
height: node.h * this.cfg.cellH + 'px',
transform: "translate("+ node.x * this.cfg.cellW +"px, "+ node.y * this.cfg.cellH +"px)"
};
}
}
其中cellW、cellH为每个格子的宽和高，这样计算节点的宽和高及位移就很容易了。
完成单个节点的拖拽
拖拽事件
1.使用mousedown、mousemove、mouseup来实现拖拽。
2.这些事件绑定在document上，只需要绑定一次就可以。
执行流程大致如下：
鼠标在拖拽句柄上按下， onMouseDown 方法触发，在eventHandler中存储一些值之后，鼠标移动则触发 onMouseMove 方法，第一次进入时 eventHandler.drag 为false，其中isDrag方法会根据位移来判断是否是拖拽行为（横向或纵向移动5像素），如果是拖拽行为，则将drag属性设置为true，同时执行 dragdrop.dragStart 方法（一次拖拽行为只会执行一次），之后鼠标继续移动，则就开始执行 dragdrop.drag 方法了。最后鼠标松开后，会执行 onMouseUp 方法，将一些状态重置回初始状态，同时执行 dragdrop.dragEnd 方法。