前言：前天剛寫了篇JS元件系列——Bootstrap Table 表格行拖拽，今天接到新的需要，需要在之前表格行拖拽的基礎上能夠同時拖拽選中的多行。部落客用了半天時間研究了下，效果是出來了，但是感覺不盡如人意。先把它分享出來，以後想到更好的辦法再優化吧。
通過上篇我們知道，如果要實作拖拽，必須要有一個可以拖拽的标簽，或者叫容器，比如上篇裡面的tr就是一個拖拽的容器，那麼如果要實作選擇行的拖拽，那麼部落客的第一反應是将選中的行放到一個容器裡面，比如放到一個div中，然後注冊這個div的可拖拽，可是實際情況是，tr是在table裡面的标簽，如果将tr用div包起來，勢必将table裡面的樣式打亂，這個界面就真的是亂掉了。很顯然，這條路走不通。然後通過谷歌浏覽器稽核元素知道，用Bootstrap table生成的表格tr的父級元素實際上是tbody，于是在想是否可以注冊tbody的拖拽，實踐證明，此法可行。于是就此開幹。
cshtm的代碼就不再重複，和上篇相同。我們重點來看看js代碼。
頁面整個js代碼
還是重點看看部分代碼
這裡代碼很簡單，主要做了兩件事：
（1）注冊tbody的可拖拽，同樣适用的JQuery UI的draggable事件。
（2）在開始拖拽前，儲存兩邊表格的資料，用于還原的操作。
這裡代碼和之前有點變化
（1）注冊#div_tableright div[class=fixed-table-container]标簽的droppable，這個标簽是Bootstrap Table表格初始化後自動生成的，為什麼不直接系統資料庫格#tb_order_right的droppable，是因為這個标簽作用域太小，會導緻拖過來的tbody捕捉不到drop事件。而系統資料庫格外部的#div_tableright div[class=fixed-table-container]這個div标簽可以解決問題。
（2）通過var arrtr = $(ui.helper[0]).find("tr[class=selected]");找到拖過來tbody裡面選中的行，然後将資料取出依次插入右邊表格，左邊表格則依次删除行資料。
（3）這裡有點麻煩的是找drop的位置，我們知道，要想将左邊選中的行放到右邊指定的位置，那麼就得得到目前滑鼠drop的位置，這裡通過ui.helper[0].offsetTop屬性來獲得滑鼠的Y軸位置，通過計算得到要插入的位置。
撤銷操作和之前也基本相同。
效果是完成了，美中不足的是每次拖過去的都是整個tbody，而不是選中的行，奈何多個選中的行無法用某一個容器包起來。暫時沒找到合适的解決方案。先這樣吧，等以後想到好的方案了再優化吧。
1、注冊drap的方法
增加了這一句$(ui.helper[0]).find("tr[class!=selected]").remove();這樣在拖動的時候就看不到未選中的行了。
2、精準定位到右邊表格指定位置：
因為每一行的行高不确定，是由行裡面的資料動态撐出來的，是以這裡也動态計算drop的位置。
至此，這個小的功能基本告一段落，基本的效果和待優化點也完成了。
源碼下載下傳