JS組件BootstrapTable表格多行拖拽效果實(shí)現(xiàn)代碼_javascript技巧

一、效果展示

1、拖動(dòng)前

2、拖動(dòng)中

3、拖動(dòng)后

4、撤銷(xiāo)回到拖動(dòng)前狀態(tài)

二、需求分析
通過(guò)上篇我們知道，如果要實(shí)現(xiàn)拖拽，必須要有一個(gè)可以拖拽的標(biāo)簽，或者叫容器，比如上篇里面的tr就是一個(gè)拖拽的容器，那么如果要實(shí)現(xiàn)選擇行的拖拽，那么博主的第一反應(yīng)是將選中的行放到一個(gè)容器里面，比如放到一個(gè)div中，然后注冊(cè)這個(gè)div的可拖拽，可是實(shí)際情況是，tr是在table里面的標(biāo)簽，如果將tr用div包起來(lái)，勢(shì)必將table里面的樣式打亂，這個(gè)界面就真的是亂掉了。很顯然，這條路走不通。然后通過(guò)谷歌瀏覽器審核元素知道，用Bootstrap table生成的表格tr的父級(jí)元素實(shí)際上是tbody，于是在想是否可以注冊(cè)tbody的拖拽，實(shí)踐證明，此法可行。于是就此開(kāi)干。

三、代碼示例
cshtm的代碼就不再重復(fù)，和上篇相同。我們重點(diǎn)來(lái)看看js代碼。

還是重點(diǎn)看看部分代碼

1、注冊(cè)左邊可拖拽

這里代碼很簡(jiǎn)單，主要做了兩件事：

（1）注冊(cè)tbody的可拖拽，同樣適用的JQuery UI的draggable事件。

（2）在開(kāi)始拖拽前，保存兩邊表格的數(shù)據(jù)，用于還原的操作。

2、注冊(cè)右邊drop

這里代碼和之前有點(diǎn)變化

（1）注冊(cè)#div_tableright div[class=fixed-table-container]標(biāo)簽的droppable，這個(gè)標(biāo)簽是Bootstrap Table表格初始化后自動(dòng)生成的，為什么不直接注冊(cè)表格#tb_order_right的droppable，是因?yàn)檫@個(gè)標(biāo)簽作用域太小，會(huì)導(dǎo)致拖過(guò)來(lái)的tbody捕捉不到drop事件。而注冊(cè)表格外部的#div_tableright div[class=fixed-table-container]這個(gè)div標(biāo)簽可以解決問(wèn)題。

（2）通過(guò)var arrtr = $(ui.helper[0]).find("tr[class=selected]");找到拖過(guò)來(lái)tbody里面選中的行，然后將數(shù)據(jù)取出依次插入右邊表格，左邊表格則依次刪除行數(shù)據(jù)。

（3）這里有點(diǎn)麻煩的是找drop的位置，我們知道，要想將左邊選中的行放到右邊指定的位置，那么就得得到當(dāng)前鼠標(biāo)drop的位置，這里通過(guò)ui.helper[0].offsetTop屬性來(lái)獲得鼠標(biāo)的Y軸位置，通過(guò)計(jì)算得到要插入的位置。

3、撤銷(xiāo)操作　　

撤銷(xiāo)操作和之前也基本相同。

四、總結(jié)
效果是完成了，美中不足的是每次拖過(guò)去的都是整個(gè)tbody，而不是選中的行，奈何多個(gè)選中的行無(wú)法用某一個(gè)容器包起來(lái)。暫時(shí)沒(méi)找到合適的解決方案。先這樣吧，等以后想到好的方案了再優(yōu)化吧。

五、優(yōu)化方案

1、注冊(cè)drap的方法

增加了這一句$(ui.helper[0]).find("tr[class!=selected]").remove();這樣在拖動(dòng)的時(shí)候就看不到未選中的行了。
2、精準(zhǔn)定位到右邊表格指定位置：

因?yàn)槊恳恍械男懈卟淮_定，是由行里面的數(shù)據(jù)動(dòng)態(tài)撐出來(lái)的，所以這里也動(dòng)態(tài)計(jì)算drop的位置。

至此，這個(gè)小的功能基本告一段落，基本的效果和待優(yōu)化點(diǎn)也完成了。

源碼下載：Bootstrap Table表格多行拖拽效果

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com