1.先clone項目到本地。

2.git reset --hard commit 命令可以使當前head指向某個commit。

完成html的基本布局

點擊復制按鈕來復制整個commit id。然后在項目根路徑下運行 git reset 。用瀏覽器打開index.html來預覽效果，該插件的html主要結果如下：

<!-- 節(jié)點容器 --><div class="dragrid"> <!-- 可拖拽的節(jié)點，使用translate控制位移 --> <div class="dragrid-item" style="transform: translate(0px, 0px)"> <!-- 通過slot可以插入動態(tài)內容 --> <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 83842ea107e7d819761f25bf06bfc545102b2944npm install<!-- 啟動，端口為7777，在package.json中可以修改 -->npm start

這一步一個是搭建環(huán)境，這個直接看webpack.config.js配置文件就可以了。

另一個就是節(jié)點的排版（layout），主要思路是把節(jié)點容器看成一個網格，每個節(jié)點就可以通過橫坐標(x)和縱坐標(y)來控制節(jié)點的位置，左上角坐標為(0, 0)；通過寬(w)和高(h)來控制節(jié)點大小；每個節(jié)點還必須有一個唯一的id。這樣節(jié)點node的數(shù)據(jù)結構就為：

{ id: "uuid", x: 0, y: 0, w: 6, h: 8}

其中w和h的值為所占網格的格數(shù)，例如容器是24格，且寬度為960px，每格寬度就為40px，則上面節(jié)點渲染為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為每個格子的寬和高，這樣計算節(jié)點的寬和高及位移就很容易了。

完成單個節(jié)點的拖拽

拖拽事件

1.使用mousedown、mousemove、mouseup來實現(xiàn)拖拽。

2.這些事件綁定在document上，只需要綁定一次就可以。

執(zhí)行流程大致如下：

鼠標在拖拽句柄上按下， onMouseDown 方法觸發(fā)，在eventHandler中存儲一些值之后，鼠標移動則觸發(fā) onMouseMove 方法，第一次進入時 eventHandler.drag 為false，其中isDrag方法會根據(jù)位移來判斷是否是拖拽行為（橫向或縱向移動5像素），如果是拖拽行為，則將drag屬性設置為true，同時執(zhí)行 dragdrop.dragStart 方法（一次拖拽行為只會執(zhí)行一次），之后鼠標繼續(xù)移動，則就開始執(zhí)行 dragdrop.drag 方法了。最后鼠標松開后，會執(zhí)行 onMouseUp 方法，將一些狀態(tài)重置回初始狀態(tài)，同時執(zhí)行 dragdrop.dragEnd 方法。