使用Vue.Draggable的自定义拖拽表单是如何实现的

Vue.Draggable 是一款基于 Sortable.js 实现的 vue 拖拽插件，实现组件化的思想，可以结合 Vue，使用起来更方便

// NPM 或 yarn 安装方式
 yarn add vuedraggable
 npm i -S vuedraggable

import draggable from 'vuedraggable';
components: {
   draggable
}

属性名称	说明
group	:group= “name”，相同的组之间可以相互拖拽
sort	:sort= “true”,是否开启内部排序,如果设置为 false,它所在组无法排序，在其他组可以拖动排序
animation	拖动时的动画效果,数字类型。如设置 animation=1000 表示 1 秒过渡动画效果

如果是单列拖拽用 group="people"

vue.draggable group 拖拽分组多组之间相互拖拽，可以实现不同数组之间相互拖拽。
比如 group 都为 componentsGroup 的组之间可以相互拖动，本文例子中 A 列和 B 列可以相互拖动，但是无法拖到 C 列。

设置方式，object，也可以通过自定义函数 function 实现复杂的逻辑

  group:{
       name:'componentsGroup',//组名为 itxst
       pull: true|false| 'clone'|array|function,//是否允许拖出当前组
       put:true|false|array|function,//是否允许拖入当前组
}

vue.draggable 全部事件列表

vue.draggable 拖拽时会触发各种事件，比如 start, add, remove, update, end, choose, unchoose, sort, filter, clone 事件，本文将列出 vue.draggable 的全部事件。

事件列表

事件名称	说明
start	开始拖动时触发的事件
add	从一个数组拖拽到另外一个数组时触发的事件
remove	移除事件
update	拖拽变换位置时触发的事件
end	拖拽完成时的事件
choose	鼠标点击选中要拖拽元素时的事件
unchoose	选中后松开鼠标的事件
sort	位置变化时的事件
clone	从一个数组拖拽到另外一个数组时触发的事件和 add 不同，clone 是复制了数组元素

网站参考：
vue.draggable 中文文档
✨Element UI 表单设计及代码生成器

代码参考：

<draggable
class="components-draggable"
:list="fieldListTheDisplayOfTheSameElement(element.list)"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }"
:clone="cloneComponent"
draggable=".components-item"
:sort="true"
@end="onEnd"

>

<div
 v-for="(item, index) in fieldListTheDisplayOfTheSameElement(element.list)"
 :key="index"
 class="components-item"
 @click="addComponent(item)"
>
 <dd :class="[`components-body`, item.valType]">
{{ item.label }}
 </dd>
</div>
</draggable>

computed:{
   fieldListTheDisplayOfTheSameElement() {
      return function(array) {
        return this.fieldList.filter(item => {
          return array.includes(item.valType);
        });
      };
    }
}

computed:{
   fieldListTheDisplayOfTheSameElement() {
      return function(array) {
        return this.fieldList.filter(item => {
          return array.includes(item.valType);
        });
      };
    }
}

<draggable 
class="drawing-board" 
:list="field" 
:animation="340" 
:sort="true" 
:group="{ name: 'componentsGroup' }">
        <div>xxxxx内容展示xxxxx</div>
</draggable>