前言：之前一直在研究DDD相關知識，好久沒更新JS系列文章了。這兩天做了一個簡單的業務需求，覺得效果還可以，今天在這裡分享給大家，歡迎拍磚~~
項目涉及到訂單子產品，那天突然接到一個需求，說是兩種不同狀态的訂單之間要實作插單的效果，頁面上呈現方式是：左右兩個Table，左邊Table裡面是狀态為1的訂單，右邊Table裡面是狀态為2訂單，左邊Table裡面的行資料拖動到右邊Table裡面指定行的位置，拖動完成後，左邊表格減少一行，右邊表格增加一行。除此之外，還需要撤銷操作(相當于Ctrl + Z操作)，能夠傳回到上一步的狀态。可能描述會讓大家模拟兩可，反正已經實作了，先來看看效果圖吧。
初初接到需求，部落客的第一感覺是應該上Bootstrap table api裡面找一下，畢竟開源的力量是強大的，或許有相關的示例呢。經過一番查找，很可惜，Bootstrap Table沒有這種兩張表格之間的操作。想想其實也可以了解，Bootstrap Table是針對某個動态表格資料綁定的，它的側重點是表格内部的功能，比如表格内部行的拖拽排序(Reorder Rows)有很好的解決方案，對于像部落客這樣的特殊需求，似乎也應該自己去實作。
既然決定自己去寫，部落客開始分析需求，似乎這個操作裡面比較困難的是拖拽效果，說到拖拽效果，原來使用JsPlumb的時候那使用太多了，于是就想到了我們神奇的JQuery UI裡面的draggable.js 和droppable.js。拖拽的問題解決了，那麼還有一個難點，就是撤銷操作怎麼辦？我們知道Ctrl+z的意思是還原，什麼叫還原？就是傳回到上一步的操作，那麼前提是要能夠儲存上一步的狀态，說到儲存某一步的狀态，部落客就知道怎麼做了，需要一個全局變量Json，裡面要有三個鍵值對，分别是目前步驟的索引、左邊表格的資料、右邊表格的資料。似乎也不太難嘛，部落客就此着手，開幹。
母版_layout.cshtml
訂單插單頁面.cshtml
全部JS代碼
我們重點來看幾個地方的代碼：
2.2.1 左邊表格加載成功之後執行表格行的可拖拽。
在draggable的start事件中，我們将拖拽之前的左右表格中的資料全部儲存到arrdata變量中，i_statuindex這個全局變量用于記錄目前這一步的索引，用于撤銷操作。
2.2.2 右邊表格在加載成功之後系統資料庫格的droppable事件
在drop事件時，取到目前拖過來的行資料，計算目前滑鼠所在的位置，在右邊表格指定位置插入拖過來的行資料。然後删除左邊表格拖過來的行資料。
2.2.3 撤銷操作代碼
撤銷操作主要是通過全局變量arrdata裡面的索引判斷撤銷到哪一步，然後根據索引取出目前步驟的左右表格資料，依次向兩表格插入資料，然後i_statuindex依次遞減，直至等于零，由于左邊表格行資料全部重寫加載過，是以需要重新注冊可拖拽事件。就是這麼簡單的三步就能實作想要的效果，是不是很簡單~~