15｜定制运营拖拽组件：如何实现运营搭建页面的拖拽功能？
杨文坚
你好，我是杨文坚。
上节课，我们学习了单元测试，也收尾了基础组件库相关开发。从今天开始，我们会正式围绕着课程的最终实战项目——运营搭建平台，打造相关的 Vue.js 业务组件和业务功能。
运营搭建平台，核心是搭建功能，“核心业务”就是提供搭建页面的能力。那这节课，我们就围绕着这个搭建页面的“核心业务”来打造业务组件，搭建页面需要用到拖拽布局组件。
可能你会问，为什么要把拖拽组件划分成业务组件？拖拽功能也很基础，为什么不划分成基础组件呢？
这是因为，拖拽功能，虽然基础，但很难做到通用，不同场景下拖拽的需求效果是不一样的。比如，是实现布局弹性排序？还是让布局直接调整位置？还是把组件从一个布局容器拖到另外一个布局容器里？当然，不同的开发团队，组件规范定义有一定差异，不过，这些功能实现，跟业务需求特点息息相关，很难做到一个组件兼顾所有拖拽功能。
那如何搭建拖拽布局组件呢？我们开始今天的学习。
为什么需要拖拽布局组件？
搭建页面，原理就是通过配置数据，来驱动页面渲染对应内容，数据描述的是目标页面的布局情况，例如页面有多少个区块、每个区块里有多少个子区块，描述布局的数据也包含了每个区块里要渲染什么组件。
这就意味着，使用者只要能控制数据就行了。所以，实际上，即使没有拖拽布局组件，我们也是能实现运营搭建页面的基本操作功能。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入探讨了如何利用原生JavaScript API实现拖拽布局功能，并结合Vue.js 3.x封装拖拽布局的业务组件。首先详细介绍了实现简单拖拽布局的步骤，包括定义父容器和子模块、监听拖拽事件、计算和重新渲染布局等。随后，通过Vue.js组件封装思维，将拖拽布局操作核心封装成父容器和子容器组件，并介绍了如何组合父容器和子容器来实现拖拽功能。文章还探讨了如何通过修改组件的Props和CSS样式来实现定制化的拖拽功能。总的来说，本文提供了深入浅出的拖拽布局组件实现原理，并结合Vue.js 3.x的实际应用示例，适合想要了解拖拽布局组件技术细节的读者阅读。文章还提出了思考题，引发读者对拖拽布局组件的进一步讨论和思考。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Vue 3 企业级项目实战课》，新⼈⾸单¥59
《Vue 3 企业级项目实战课》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(3)
- 最新
- 精选
x老师您好，我想弄个简单的东西，让运营自己整一些简单的页面。比如我定义一个p标签的对象，pobj={tag:'p',attrs:{}}这种格式。然后运营拖特定组件到固定地方后在一个全局json中添加这个对象，并且在这个对象中添加一个全局唯一的id。然后运营在页面中点击我通过一个深度递归函数生成的这个p,就可以通过id找到这个对象从而给这个元素修改宽高等属性。请老师指教一下。。我感觉我现在这样写走歪了。。作者回复: 您好，你提到的“方式是否走歪”取决于功能是否实用？是否真的提高效率？这个没有绝对的正确答案，因为不同业务场景特点不一样，需要多次尝试才能找到“实用”的方案。
2023-01-25归属地：浙江- 定宇老师您好 想问一下后续会有讲到打包Vue组件到npm上+index.d.ts的内容吗 最近刚好遇到类似的需求 但研究了两天没有什么太好的解法 尤其简单打包然后npm install后没办法有ts提示
作者回复: 您好，本课的源码案例就有包括dts文件的生成。可以参考第10讲的源码案例 https://github.com/FE-star/vue3-course/blob/main/chapter/10/scripts/build-dts.ts
2022-12-29归属地：中国台湾3 
escray
提一个小白问题，在执行第 15 课的源码的时候，提示如下错误： The following dependencies are imported but could not be resolved: @my/components/css/index.css (imported by ../vue3-course/chapter/15/packages/business/main.ts) Are they installed? 应该是我引用的那个 css 文件没有正确的加载，是少了什么命令操作么？2024-01-09归属地：江苏
收起评论