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

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

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

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

vue.draggable group 拖拽分组多组之间相互拖拽，可以实现不同数组之间相互拖拽。

比如 group 都为 componentsGroup 的组之间可以相互拖动，本文例子中 A 列和 B 列可以相互拖动，但是无法拖到 C 列。

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

group:{name:'componentsGroup',//组名为 itxstpull: 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 的全部事件。

事件列表

网站参考：

vue.draggable 中文文档

✨Element UI 表单设计及代码生成器

代码参考：

<draggableclass="components-draggable":list="fieldListTheDisplayOfTheSameElement(element.list)":group="{ name: 'componentsGroup', pull: 'clone', put: false }":clone="cloneComponent"draggable=".components-item":sort="true"@end="onEnd"><divv-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>