前端适用的几个拖拉拽插件-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端适用的几个拖拉拽插件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

今天分享几个拖拉拽的工具，包括流程图和表单

GoJS
vue.draggable
Vue.Draggable.next
form-generator

GoJS 这个上手也挺快的，大部分需求都可以满足

前端适用的几个拖拉拽插件

vue.draggable 支持vue2

Vue.Draggable.next 是一款vue3的拖拽插件,基于Sortable.js实现的，你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景

Form Generator

Vue 表单生成器(Form Generator)是一个基于Schema的表单生成器组件，可以基于Schema构建反应式表单。

Vue 表单生成器(Form Generator)提供21种字段类型，、也可以使用自定义字段进行扩展。生成的模板对Bootstrap友好，并且可以轻松自定义样式。

npm install vue-form-generator
//全局引入
import VueFormGenerator from "vue-form-generator";
import "vue-form-generator/dist/vfg.css";

Vue.use(VueFormGenerator)

//组件中引入
<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>

import VueFormGenerator from "vue-form-generator";

export default {
    components: {
        "vue-form-generator": VueFormGenerator.component
    },
    data(){
		return{
		{
		  model: {
		    id: 1,
		    name: 'John Doe',
		    password: 'J0hnD03!x4',
		    skills: ['Javascript', 'VueJS'],
		    email: 'john.doe@gmail.com',
		    status: true
		  },
		  schema: {
		    fields: [
		      {
		        type: 'input',
		        inputType: 'text',
		        label: 'ID (disabled text field)',
		        model: 'id',
		        readonly: true,
		        disabled: true
		      },
		    ]
		  },
		  formOptions: {
		    validateAfterLoad: true,
		    validateAfterChanged: true,
		    validateAsync: true
		  }
		}
	}
	}
};