學(xué)習(xí)來源：稀土掘金 - 幽月之格大佬的技術(shù)專欄可拖拽、縮放、旋轉(zhuǎn)組件 - 著作：可拖拽、縮放、旋轉(zhuǎn)組件實現(xiàn)細(xì)節(jié)

非常感謝大佬！受益匪淺！

前面我們學(xué)習(xí)了很多vue3的知識，是時候把它們用起來做一個有意思的平臺：低代碼海報制作平臺了。首先我們要實現(xiàn)基礎(chǔ)的拖拽功能，這里非常感謝掘金優(yōu)秀創(chuàng)作者幽月之格大佬，拜讀您的可拖拽、縮放、旋轉(zhuǎn)組件技術(shù)專欄讓我跟著一步步的敲代碼，站在大佬的肩膀上，參考下技術(shù)大牛是怎么實現(xiàn)的。學(xué)習(xí)別人的設(shè)計思想，當(dāng)然代碼也不是完全照搬，要有自己的思考。

vitepress文檔完善

為了演示拖拽的示例，和之前自研組件庫開發(fā)一樣，我們依然采用vitepress：

基本實現(xiàn)

通過前面基本組件開發(fā)的tsx寫法的學(xué)習(xí)，現(xiàn)在我們可以很輕松的開發(fā)出這樣的結(jié)構(gòu)：

基本拖拽的核心實現(xiàn)和掘金優(yōu)秀創(chuàng)作者幽月之格的教程中實現(xiàn)的差不多，稍有區(qū)別的是這一塊邏輯：

實現(xiàn)后的效果：

區(qū)域拖拽實現(xiàn)

核心實現(xiàn)需要基于開啟區(qū)域拖拽的boundary來判斷最大拖拽距離的邏輯：

注意，這里while循環(huán)來獲取外層距離drag元素最近的相對父容器的邏輯以及邊界判斷邏輯。

測試邊界拖拽

相對內(nèi)層容器：

效果：

再相對外層容器：

效果：