背景

大家或多或少應(yīng)該有遇到過通過拖拽改變DOM大小的需求：比如說頁面的側(cè)邊欄支持拖拽調(diào)整大小，使內(nèi)容可視區(qū)變大。之所以講這個需求，是因為在我個人開發(fā)的開源項目中有做到這個需求，所以在這里和大家聊一聊我的實現(xiàn)。以下內(nèi)容均以向右拖拽為例。

思路

既然要實現(xiàn)拖拽，那就需要在DOM內(nèi)有一個支持拖拽的節(jié)點，然后通過 addEventListener 來監(jiān)聽 鼠標點擊 、 鼠標點擊后移動事件 、 鼠標松開事件 。在鼠標點擊后監(jiān)聽移動事件，在移動事件中計算鼠標點擊位置與移動后的位置間的距離：這個距離就是DOM需要增加或者減少的寬度。

簡單實現(xiàn)

思路清楚了，剩下的就是實現(xiàn)了，最主要的就是計算的部分了。貼上實現(xiàn)代碼：

拖拽指令

上面已經(jīng)完成了簡單的實現(xiàn)，但是在我們實際開發(fā)過程中不會就某一個地方需要用到這個實現(xiàn)。雖然可以 CV ，但這絕對不是最優(yōu)解，在這基礎(chǔ)之上進一步優(yōu)化。

我們可以將這個功能封裝成自定義指令，思路與上文的思路相差無幾。在所有節(jié)點都掛載完成之后，在使用了指令的節(jié)點里面插入一個可拖拽的節(jié)點，然后通過 addEventListener 來監(jiān)聽各個鼠標事件，再進行一些計算，最后在節(jié)點卸載后移除相關(guān)監(jiān)聽。

本著精益求精的態(tài)度，必然不能只做到上面提到的那些。在實際開發(fā)中或許會遇到一些其它情況：比如我們拖拽的方向、可拖拽的最大最小距離、具體事件的回調(diào)等等問題都需要考慮在內(nèi)。就有了以下完整的實現(xiàn)：

以上就是本次分享的內(nèi)容，附上 源碼 。

以上就是本次分享的內(nèi)容，附上 源碼。

感謝看官看到這里，如果覺得文章不錯的話，可以給小生的幾個開源項目點個Star?！

• 基于 Vue3 + Element-plus 管理后臺基礎(chǔ)功能框架

  • 預(yù)覽：http://admin.gumingchen.icu

  • Github：https://github.com/gmingchen/agile-admin

  • Gitee：https://gitee.com/shychen/agile-admin

  • 基礎(chǔ)版后端：https://github.com/gmingchen/java-spring-boot-admin

  • 文檔：http://admin.gumingchen.icu/doc/

• 基于 Vue3 + Element-plus + websocket 即時聊天系統(tǒng)

  • 預(yù)覽：http://im.gumingchen.icu

  • 代碼：https://github.com/gmingchen/vue3-element-plus-im

  • 后端代碼：https://github.com/gmingchen/java-im

• 基于 node 開發(fā)的后端服務(wù)：https://github.com/gmingchen/node-server