hi，朋友，您来啦。带上小板凳，我们一起聊一聊今天的话题。

首先，我觉得需要对那些很牛的开源项目，及其背后的工程师们致敬，是他们推动了技术的发展，铸造了今天的雨后春笋。当然，不止包含开源项目。

原理与实现方法

最基本的原理

首先，我们需要通过CSS样式，去设定一个布局规则，同时使用HTML DOM结构来完成最终的布局和渲染工作，然后通过Javascript脚本辅助实现拖拽功能。

此时暂不关心数据交互。

快速实现方法：Bootstrap + dragula.js。

带基本交互的原理

在基本原理之上，我们需要通过一份描述表单、组件、字段等的JSON Schema，去实现表单的属性和具体行为，这样才能更好的去支持数据交互和逻辑处理。

快速实现方法：vue3 + vue-draggable-next + ( element ui、ant design等组件库 )。

通过以上原理及实现方法，此时您已经完成了，拖拽式表单设计器的入门。

表单交互

当我们完成了表单与组件的拖拽和渲染时，我们就需要进一步去优化，组件与组件之间的交互与响应问题。

此时，我们可以提供一些常用的快捷交互设置。比如：根据条件隐藏、根据条件禁用、根据条件重新渲染组件的可选项等等，以便满足不同场景下的需求。

当平台交互功能，不能满足用户定制的需求时，我们可能需要，给用户提供事件脚本的编辑功能。此时您可以引入一款代码编辑器：Ace、CodeMirror 、 Monaco等。

入门到转行

当然，此时说的转行，可能只是一句调侃的话。因为，当你把设计器配置版块，也实现成了拖拽后生成，那么是不是就不再需要开发人员了？被迫转行[笑哭]。

关注作者：关注有趣的表单设计器。

希望本文能够对您有所帮助，感谢您的阅读！

人人为我，我为人人，谢谢您的浏览，让我们一起加油吧。