前置
- npm install vuedraggable@2.24.3
- Vue2
以下代码
<div class="myDraggable">
<a-card class="myDraggable-left">
<draggable :group="{name: 'dragGroup', pull: 'clone', put: false}" :sort="false" v-model="basicFields"
element="ul" :clone="handleFieldWidgetClone">
<transition-group tag="div" class="form-widget-list">
<li v-for="(item, i) in basicFields" :key="i" class="container-widget-item">
<span>{{widgetLabel[item.type]}}</span>
</li>
</transition-group>
</draggable>
</a-card>
<a-card class="myDraggable-content">
<div class="operate">
<span @click="clearFormWidget"><a-icon type="delete" /> 删除</span>
<span @click="previewForm"><a-icon type="eye"/> 预览</span>
</div>
<a-form-model class="full-height-width" :labelAlign="formConfig.labelAlign" :layout="formConfig.layout"
v-bind="formItemLayout" :class="formConfig.layout == 'horizontal' ? 'flex-form' : '' ">
<p class="no-widget-hint" v-if="!designer.widgetList.length">请从左侧列表中选择一个组件, 然后用鼠标拖动组件放置于此处.</p>
<draggable v-bind="{group:'dragGroup', ghostClass: 'ghost', animation: 100}"
v-model="designer.widgetList"
handle=".drag-handler"
@end="onDragEnd" @add="onDragAdd" @update="onDragUpdate" :move="checkMove"
>
<transition-group name="fade" tag="div" class="form-widget-list">
<template v-for="(widget, index) in designer.widgetList">
<component :is="getWidgetName(widget)" :key="widget.id" :field="widget" :designer="designer"
:parent-list="designer.widgetList" :index-of-parent-list="index" :formConfig="formConfig"></component>
</template>
</transition-group>
</draggable>
</a-form-model>
</a-card>
<a-card class="myDraggable-right">
<a-tabs default-active-key="1">
<a-tab-pane key="1" tab="表单属性">
<formSetting :formConfig="designer.formConfig"></formSetting>
</a-tab-pane>
<a-tab-pane key="2" tab="组件属性">
<formEditor :designer="designer" :formConfig="designer.formConfig"></formEditor>
</a-tab-pane>
</a-tabs>
</a-card>
<a-modal title="预览" v-model="showPreviewDialogFlag" v-if="showPreviewDialogFlag" width="850px">
<VFormRender :form-json="formJson" :designer="designer"></VFormRender>
</a-modal>
</div>
- 其中 basicFields 为左边组件栏目
- 中间为展示栏，通过draggable绑定一个数组展示左侧的托到中间的数组，本质上是通过循环去遍历动态组件，然后根据左侧的类型展示组件
- 右侧其实也是组件进行遍历展示的，其中表单属性是一个a-form表单，组件属性是动态组件，和中间栏渲染方式类似。
- draggable需要注意的是v-bind属性中的group，这个是进行分组，如果两个值设置不一样，则draggable不会互相拖拽。
展示图
