首先我們看下最終的交互效果:
此功能是針對(duì)vue項(xiàng)目的表格拖拽,以自定義指令的形式來(lái)完成交互的.
主要原理的dom節(jié)點(diǎn)的交換;
交互思路:
1.首先要獲取當(dāng)前點(diǎn)擊的th,并且在頁(yè)面創(chuàng)建一個(gè)大小內(nèi)容和th一模一樣的div.并設(shè)置當(dāng)前div的樣式始終隨著鼠標(biāo).
2.將頁(yè)面上所有的th的寬度保存到一個(gè)數(shù)組中(thWidthArr),獲取保存下來(lái)當(dāng)前點(diǎn)擊的th的index(directionIndex),和鼠標(biāo)拖動(dòng)到最后松開(kāi)的時(shí)候所停留的th的index(finallIndex);
3.當(dāng)鼠標(biāo)拖拽到確定的位置,將最初始的th和插入到當(dāng)前位置(通過(guò)directionIndex和finallIndex來(lái)確定)
完整代碼請(qǐng)移步:https://github.com/slailcp/vue-dragTable 哦
自定義指令名字叫做 "slldrag" 使用的時(shí)候就是v-slldrag,
