Several drag-and-drop plugins for the front end

Share a few drag-and-drop tools today, including flowcharts and forms

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

GoJS is also very fast to get started, and most of the needs can be met

vue.draggable supports vue2

Vue.Draggable.next is a vue3 drag-and-drop plug-in, based on Sortable.js, you can use it to drag and drop lists, menus, workbenches, tabs and other common working scenarios

Form Generator

Vue Form Generator (Form Generator) is a Schema-based form generator component that can build reactive forms based on Schema.

Vue Form Generator (Form Generator) provides 21 field types, and can also be extended with custom fields. The generated templates are Bootstrap friendly and easily customizable.

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: '[email protected]',
		    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
		  }
		}
	}
	}
};