需求簡介
最近接了一個需求，需要實作不同登入人員可以自定義首頁子產品卡片。簡單來說，就是實作首頁看闆子產品的增添與拖拉拽，效果如下：
技術選型
原生js是支援拖拉拽的，隻需要将拖拽的元素的 draggable 屬性設定成 "true"即可，然後就是調用相應的函數即可。
拖拽操作 - Web API 接口參考 | MDN
但是，原生js功能不夠完善，使用起來需要改造的地方很多，是以，選用成熟的第三方插件比較好。
我們的主項目采用的是vue3，,經過一系列對比，最終選擇了 vue-draggable-next這個插件。
vue-draggable-next
vue-draggable-next的周下載下傳量月3萬左右，可以看出是一個比較靠譜的插件。
它的使用方式npmj上也介紹的很詳細：
vue-draggable-next
如果英文的使用Api看起來比較難受，網上還有中文的使用文檔：
vue.draggable.next 中文文檔 - itxst.com
這個插件也有vue2版本和純js版本，其他架構也是也是可以完美使用的。
實作思路
需求與技術簡析
根據我們的需求，我們應該實作的是分組拖拽，假設我們有三列，那我們要實作的就是這A、B、C三列資料互相拖拽。
我們看看中文官網給的示例：
vue.draggable.next group 例子
看起來很容易，我們隻需要寫多個draggable标簽，每個draggable标簽寫入相同的組名即可。
實作方案
架構實作
回到代碼中，要想實作一個三列可拖拉拽的子產品清單，我們首先需要引入元件
<script lang="ts" setup>
import { VueDraggableNext } from 'vue-draggable-next'
// ....
</script>
然後定義一個數組儲存資料：
<script lang="ts" setup>
import { VueDraggableNext } from 'vue-draggable-next'
const moduleList = ref([
{
"columnIndex": 1,
"moduleDetail": [
{ "moduleCode": "deviation", "moduleName": "控制失調空間",},
{ "moduleCode": "meeting_pending", "moduleName": "會議待辦",},
{ "moduleCode": "abnormal_events", "moduleName": "異常事件", },
{ "moduleCode": "audit_matters", "moduleName": "事項審批",}
],
},
{
"columnIndex": 2,
"moduleDetail": [
{ "moduleCode": "air_conditioning_terminal", "moduleName": "空調末端", }
],
},
{
"columnIndex": 3,
"moduleDetail": [
{ "moduleCode": "run_broadcast", "moduleName": "運作播報",},
{"moduleCode": "my_schedule", "moduleName": "我的日程", },
{ "moduleCode": "cold_station", "moduleName": "冷站",}
],
}
])
</script>
最後，在代碼中我們使用v-for循環渲染即可
<div v-for="moduleColumn in moduleList " :key="moduleColumn.columnIndex" class="box">
<VueDraggableNext :list="moduleColumn.moduleDetail" group="column" >
<div v-for="(item, index) in moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">
<!-- 子產品内容 -->
</div>
</VueDraggableNext>
</div>
注意上面的html結構，我們循環渲染了三列VueDraggableNext标簽，每個VueDraggableNext标簽内部又通過v-for="(item, index) in moduleColumn.moduleDetail渲染了這個拖拽列内部的所有子產品。我們通過group="column" 讓每個VueDraggableNext元件的組名相同，實作了三個拖拽标簽之間的子產品互相拖拉拽。
拖拽點設定
正常情況小，我們肯定是希望在某個元件的固定位置才能拖動元件，是以我們需要使用到拖拽元件的handle屬性。
vue.draggable.next屬性說明：
| handle | :handle=".mover" 隻有當滑鼠在class為mover類的元素上才能觸發拖到事件 |
根據屬性說明，我們的代碼實作起來也非常容易了。
<div v-for="moduleColumn in moduleList " :key="moduleColumn.columnIndex" class="box">
<VueDraggableNext :list="moduleColumn.moduleDetail" handle=".move" group="column">
<div v-for="(item, index) in moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">
<div class="move">
拖拽區域
</div>
<!-- 子產品内容 -->
</div>
</VueDraggableNext>
</div>
資料的增删改
實際開發中，我麼一定會根據接口或者操作動态的更改清單，代碼層也就是更改moduleList的值。非常幸運的是，如果你按照上面的方式寫代碼，當你拖拉拽完畢後，上面的moduleList值會自動更改，我們不用做任何處理！！！這麼看，資料的增删改根本不是問題。
如何動态渲染元件
實際開發中，我們可能會遇到一個問題，就是如何動态的去渲染元件，如果你熟悉vue，使用動态元件component就可以實作。
首先，我們需要定義一個子產品清單
import MeetingPending from '../components/meetingPending.vue'
import AbnormalEvents from '../components/abnormalEvents/index.vue'
import MySchedule from '../components/mySchedule.vue'
import TransactionApproval from '../components/transactionApproval.vue'
import RunningBroadcast from '../components/runningBroadcast.vue'
import CodeSite from '../components/codeSite/index.vue'
import MismatchSpace from '../components/mismatchSpace/index.vue'
import AirDevice from '../components/airDevice/index.vue'
// !全量子產品選擇清單
export const allModuleList = [
{ moduleCode: 'meeting_pending', label: '會議待辦', component: MeetingPending },
{ moduleCode: 'my_schedule', label: '我的日程', component: MySchedule },
{ moduleCode: 'audit_matters', label: '事項審批', component: TransactionApproval },
{ moduleCode: 'abnormal_events', label: '異常事件', component: AbnormalEvents },
{ moduleCode: 'deviation', label: '控制失調空間', component: MismatchSpace },
{ moduleCode: 'run_broadcast', label: '運作播報', component: RunningBroadcast },
{ moduleCode: 'cold_station', label: '冷站', component: CodeSite },
{ moduleCode: 'air_conditioning_terminal', label: '空調末端', component: AirDevice }
]
然後根據moduleCode做比對，動态渲染即可
<div v-for="moduleColumn in moduleList " :key="moduleColumn.columnIndex" class="box">
<VueDraggableNext :list="moduleColumn.moduleDetail" handle=".move" group="column">
<div v-for="(item, index) in moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">
<div class="move">
拖拽區域
</div>
<component :is="getComponentsByCode(item.moduleCode)" ></component>
</div>
</VueDraggableNext>
</div>
更多定制化需求
如果上面的功能不滿足你的需求，我們可以使用這個元件的其他屬性，完成更多意想不到的效果
如果下面的屬性說明未能完全看明，可以看左邊的對應的菜單檢視詳細說明和例子。
| 屬性名稱 | 說明 |
| group | 如果一個頁面有多個拖拽區域，通過設定group名稱可以實作多個區域之間互相拖拽 或者 { name: "...", pull: [true, false, 'clone', array , function], put: [true, false, array , function] } |
| sort | 是否開啟排序,如果設定為false,它所在組無法排序 |
| delay | 滑鼠按下多少秒之後可以拖拽元素 |
| touchStartThreshold | 滑鼠按下移動多少px才能拖動元素 |
| disabled | :disabled= "true",是否啟用拖拽元件 |
| animation | 拖動時的動畫效果，如設定animation=1000表示1秒過渡動畫效果 |
| handle | :handle=".mover" 隻有當滑鼠在class為mover類的元素上才能觸發拖到事件 |
| filter | :filter=".unmover" 設定了unmover樣式的元素不允許拖動 |
| draggable | :draggable=".item" 樣式類為item的元素才能被拖動 |
| ghost-class | :ghost-class="ghostClass" 設定拖動元素的占位符類名,你的自定義樣式可能需要加!important才能生效，并把forceFallback屬性設定成true |
| chosen-class | :ghost-class="hostClass" 被選中目标的樣式，你的自定義樣式可能需要加!important才能生效，并把forceFallback屬性設定成true |
| drag-class | :drag-class="dragClass"拖動元素的樣式，你的自定義樣式可能需要加!important才能生效，并把forceFallback屬性設定成true |
| force-fallback | 預設false，忽略HTML5的拖拽行為，因為h5裡有個屬性也是可以拖動，你要自定義ghostClass chosenClass dragClass樣式時，建議forceFallback設定為true |
| fallback-class | 預設false，克隆選中元素的樣式到跟随滑鼠的樣式 |
| fallback-on-body | 預設false，克隆的元素添加到文檔的body中 |
| fallback-tolerance | 按下滑鼠移動多少個像素才能拖動元素，:fallback-tolerance="8" |
| scroll | 預設true,有滾動區域是否允許拖拽 |
| scroll-fn | 滾動回調函數 |
| scroll-fensitivity | 距離滾動區域多遠時，滾動滾動條 |
| scroll-speed | 滾動速度 |
傳送門：vue.draggable.next 中文文檔 - itxst.com
寫在最後
關聯文章：如何實作子產品的錨點定位及閃爍提示：juejin.cn/post/734622…
作者：石小石Orz
連結：https://juejin.cn/post/7346121373112811583