篇文章本来是为了Github starts突破2k 留的纪念，并没有写太多内容， 没想到过了2天头条开始推送，评论，点赞量很多，有点惊喜也有点意外啊！

vue-form-making 这个项目我们没有做什么推广，从2018年开始每天几个星星慢慢积累起来了2000个， 能得到大家支持与认可，我们还是非常的欣喜，我们这几年的努力没有白费。

在此叩谢。

以下是近期Github的流量图:

虽然之前我们就上过一次Github Trending 榜单，但是还是不介意再上一次，哈哈。

好了言归正传，我来解释下这个项目是做什么的，为什么这么受欢迎。

这个项目是做什么的？

基于Vue 页面设计器，只需用拖拽的方式就能设计并生成完整的html文件或是Vue组件，直接可用。

如果你是前端开发者

能减少大量的重复工作，常用组件从左边组件库拖拽即可，每个组件有不同的属性，点击设计器中的组件就可以在右边配置各种属性，各种布局控件能满足大部分的复杂页面的涉及需求。如果我们提供的这些组件还不能满足您的需求，我们提供了自定义组件，您只需要在自定义区域写自己代码即可。

如果你是后端开发者

大量内置控件能满足你的需求，css样式也是内置了，如果没有特别复杂的需求，不用写任何前端代码，只需要在设计器中拖动控件就能完成页面设计，实时预览页面效果，数据生成JSON格式，你只需要关注后端开发，提供Resful 接口即可轻松实现前后端的交互。

如果你想搭建自己的一套设计器

您可以基于我们的源码进行二次开发，我们提供源码和文档，助你快速搭建属于自己的网站设计器。

项目截图

1分钟快速创建一个页面

我们以新闻发布页面为例子

第一步

如图拖动控件到设计器中间，根据业务需要修改字段标识和标题两个参数：

分类使用的是下拉框组件，需要设置参数，可以设置静态参数和远程参数:

设置为远端数据，只需自己写好和后端交互代码，将数据交给页面渲染

相关代码

remoteFuncs: {

func_test (resolve) {

// 下拉选择框 select_1566990949275

// 获取到远端数据后执行回调函数

// resolve(data)

// 模拟数据获取

setTimeout(() => {

const options = [

{value: 'value1', label: 'label1'},

{value: 'value1', label: 'label1'},

{value: 'value1', label: 'label1'},

]

// 对象中 value、label 是设计器中配置的值和标签

resolve(options)

}, 2000)

},

}

第二步

没有第二步，直接预览：

点击预览按钮即可查看效果：

也可以插入数据测试：

点击获取数据即可得到刚才添加的数据：

以上新闻纯属扯淡，不用太当真，要不然真会甩出个大更新出来。

如果你觉得设计的页面满意了，点击生产代码：

直接保存成html 文件即可打开运行，是不是很简单！

更多详情和开发文档请访问下方链接

工具地址：

http://tools.xiaoyaoji.cn/form

GitHub地址：

https://github.com/GavinZhuLei/vue-form-making

过拖放实现添加、删除

DataTransfer对象

包含的属性和方法

dataTransfer.dropEffect:设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不在effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。该属性值只允许为none、copy、link和move四个值之一。

dataTransfer.effectAllowed:设置或返回被拖动元素允许发生的拖放行为。该属性值可设置为none、copy、copyLink、copyMove、link、linkMove、move、all和uninitialized。

dataTransfer.items:该属性返回DataTransferltems对象，代表拖动数据。

dataTransfer.setDraglmage(element,x,y):设置拖放操作的自定义图标。

dataTransfer.addElement(element)：添加自定义图标。

dataTransfer.types：该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。

dataTransfer.getData(format)：获取DataTransfer对象中format格式的数据。

dataTransfer.setData(format,data)：向DataTransfer对象中设置format格式的数据。format代表数据格式，data代表数据。

dataTransfer.clearData([format])：清除DataTransfer对象中format格式的数据。

可以将喜欢的水果放入下面的方框内，如果喜欢，可以放到右边的盘子内。

拖放行为

通过设置DataTransfer对象的effectAllowed、dropEffect两个属性可以控制拖放行为。effectAllowed用于控制被拖动元素的拖动行为，dropEffect来控制被“放”入得目标组件的行为。

如果effectAllowed设为none，则不允许拖动该元素。

如果dropEffect设置为none，则被拖动的元素不能“放”到本元素中。

如果effectAllowed设置为all或不设置，则dropEffect可设置为任何属性值，而且将会遵守dropEffect指定的拖放行为。

如果effectAllowed指定了特定的拖放行为，那么dropEffect指定的属性值必须是effectAllowed指定的多个属性值的子集。

上面代码通过调用DataTransfer对象的setDragImage可以改变拖放过程中图标。