【vue】聊一聊拖拽改变DOM大小的实现

shy帅宸

共 1366字,需浏览 3分钟

 ·

2023-08-31 10:46

背景

大家或多或少应该有遇到过通过拖拽改变DOM大小的需求:比如说页面的侧边栏支持拖拽调整大小,使内容可视区变大。之所以讲这个需求,是因为在我个人开发的开源项目中有做到这个需求,所以在这里和大家聊一聊我的实现。以下内容均以向右拖拽为例。

思路

既然要实现拖拽,那就需要在DOM内有一个支持拖拽的节点,然后通过 addEventListener 来监听 鼠标点击 鼠标点击后移动事件 鼠标松开事件 。在鼠标点击后监听移动事件,在移动事件中计算鼠标点击位置与移动后的位置间的距离:这个距离就是DOM需要增加或者减少的宽度。

简单实现

思路清楚了,剩下的就是实现了,最主要的就是计算的部分了。贴上实现代码:

1a038a48b0ace84010b57a847f47fd21.webp

拖拽指令

上面已经完成了简单的实现,但是在我们实际开发过程中不会就某一个地方需要用到这个实现。虽然可以 CV ,但这绝对不是最优解,在这基础之上进一步优化。

我们可以将这个功能封装成自定义指令,思路与上文的思路相差无几。在所有节点都挂载完成之后,在使用了指令的节点里面插入一个可拖拽的节点,然后通过 addEventListener 来监听各个鼠标事件,再进行一些计算,最后在节点卸载后移除相关监听。

本着精益求精的态度,必然不能只做到上面提到的那些。在实际开发中或许会遇到一些其它情况:比如我们拖拽的方向、可拖拽的最大最小距离、具体事件的回调等等问题都需要考虑在内。就有了以下完整的实现:

以上就是本次分享的内容,附上 源码

77183fed873a43e3f66d8de133ec2204.webp

9fd5ce2218248b0fd6dac67f1e914193.webp

c35d3d1ea89469e578b4e7e2ed591c8e.webp

8ab04cd030f1327efce6d90dfe3d0e39.webp

341f8bacc6770edafb4d4696b90a1531.webp

以上就是本次分享的内容,附上 源码

感谢看官看到这里,如果觉得文章不错的话,可以给小生的几个开源项目点个Star⭐!

  • 基于 Vue3 + Element-plus 管理后台基础功能框架

    • 预览:http://admin.gumingchen.icu

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

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

    • 基础版后端:https://github.com/gmingchen/java-spring-boot-admin

    • 文档:http://admin.gumingchen.icu/doc/

  • 基于 Vue3 + Element-plus + websocket 即时聊天系统

    • 预览:http://im.gumingchen.icu

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

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

  • 基于 node 开发的后端服务:https://github.com/gmingchen/node-server

浏览 62
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报