前言
之前vue移動拖拽庫使用的是vue-draggable，但擴展性偏弱。而dnd在這方面有優(yōu)勢，需要做這個功能的小伙伴，個人建議優(yōu)先選擇dnd。不過dnd有學習成本。此文章就是希望能降低vue3 dnd的學習成本。
開發(fā)思路
直接跟著我下面的dnd示例做，跑一遍dnd的流程。dnd的代碼量其實很少的，做一遍你就知道dnd是怎么運行的，其實就已經(jīng)是上手了。
然后根據(jù)自己需要的業(yè)務，去找dnd的官方示例，官方示例有5大模塊，每個模塊也就三五示例。里面基本涵蓋了dnd能實現(xiàn)的常見功能。找到類似自己的業(yè)務的示例后，下載官方源碼，自己根據(jù)官方文檔的api，改造示例代碼即可。
創(chuàng)建一個dnd流程
實現(xiàn)目標：將一個拖拽源拖拽到容器中
創(chuàng)建一個可以被拖拽的拖拽源(Drag)
監(jiān)聽拖拽源的狀態(tài)
完整的示例
監(jiān)聽拖拽源是否正在被拖拽中
拖拽源的各種狀態(tài)變化都在monitor，可查詢官方文檔api獲取自己想監(jiān)聽的狀態(tài)
創(chuàng)建一個接受拖拽源的容器(Drop)
實時監(jiān)聽容器內(nèi)的情況
####示例 實時監(jiān)聽容器內(nèi)的拖拽源位置變化
備注：拖拽源也有自己的實時監(jiān)聽方法，具體方法api請見文檔。
- 常用的實時監(jiān)聽事件
| 名稱 | 說明 |
|---|---|
| drop() | 拖拽源放置結束后觸發(fā)事件 |
至此，你已經(jīng)實現(xiàn)了一個完整的拖拽功能了，想必也理解dnd的運作過程了。如果還不理解，那就回頭看看自己的代碼，多玩一下自己實現(xiàn)的示例。
如何使用dnd實現(xiàn)自己的業(yè)務
實現(xiàn)自己需要的業(yè)務時，可先查看官方文檔的示例，里面基本涵蓋了dnd能實現(xiàn)的常見功能。找到類似自己的業(yè)務的示例后，下載官方源碼，自己根據(jù)官方文檔的api，改造示例代碼即可。
