手把手带你撸一款表单设计器（vue3+elementPlus），通过最简单的代码，让你深刻理解表单设计器的实现原理。

在Element-UI el-table中使用 sortabe 较好（也就是用来实现表格的拖拽功能）；表单的拖拽使用 vuedraggable 居多，适应大多数应用场景，包括表格的拖拽也有很好的支持，

简易低代码表单生成器，基于vue+vuedraggable，预览地址见正文，欢迎star 设计思路： 1.将生成器分为左侧物料区，中间渲染区，右侧属性区域 2.左侧物料区组件可以通过拖

emptyInsertThreshold:拖动时，鼠标必须与空的可排序对象之间的距离（以像素为单位），以便将拖动元素插入到该可排序对象中。默认为5。设置为0禁用此功能。这个参数要适当的设置，如果是默认值，当列为空的时候，很难把元素拖进去，这个也是一个比较难解决的点，因为需要把右…

九头虫：你去把唐僧师徒除掉；奔波灞：啊？我？；老板：给你20天，写一个动态表单生成器；我：反手充值boss直聘VIP

这个拖拽的实现其实并不复杂，主要可以分为两部分，左边的组件列表和右边生成的表单在表单区域内的操作相比于组件列表更加复杂

draggable在项目中的实际应用 这个功能为公司做的项目中的一个功能，要求能拖拽配置表单，并且能实现实时计算，本文讲述的是拖拽表单组件，配置出对应的算法的实现

写在前面 为啥会写这么个项目呢，倒不是觉得表单设计器在开发中多么的有用，能提高开发效率啥的，其实是因为面试被问到低代码相关的东西，答：不太了解。不太确定是不是因为这个被挂了，但是面了几家都问过低代码，

当时实现这样的需求，没有用到任何第三方表单解决方案，纯用redux实现，写了很多很多重复而复杂的面条代码，包括，表单的数据收集，字段校验等等，代码可维护性极低，最终迫使我开始真正深入表单领域，探索最佳的表单解决方案。 慢慢的，接触了集团内部和业界很多优秀的表单解决方案，它们的核…