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