vue draggable 两个列表之间的拖拽

1. group   可以传入对象：object：{name,pull,put}

2.name两个 draggable 节点中, group 的 name 是一样的, 就可以实现两个区域的相互拖拽.：:group='{name: "menu", put: true}'  

3. pull：pull用来定义从这个列表容器移动出去的设置，true/false/'clone'/function true:列表容器内的列表单元可以被移出； false：列表容器内的列表单元不可以被移出；

4.'clone'：列表单元移出，移动的为该元素的副本； function：用来进行pull的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否移出；

5.其他参数：

group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }

sort：boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序；

delay：number 定义鼠标选中列表单元可以开始拖动的延迟时间；

disabled：boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为可以进行排序，相当于一个开关；

animation：number 单位：ms，定义排序动画的时间；

handle：selector 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动；

filter：selector 格式为简单css选择器的字符串，定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔；

draggable：selector 格式为简单css选择器的字符串，定义哪些列表单元可以进行拖放 ghostClass：

selector 格式为简单css选择器的字符串，当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class，我们可以通过这种方式来给影子元素进行编辑样式；

chosenClass：selector 格式为简单css选择器的字符串，当选中列表单元时会给该单元增加一个class；

forceFallback：boolean 如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等；

fallbackClass：string 当forceFallback设置为true时，拖放过程中鼠标附着单元的样式；

scroll：boolean 默认为true，当排序的容器是个可滚动的区域，拖放可以引起区域滚动 事件：

onChoose：function 列表单元被选中的回调函数

onStart：function 列表单元拖动开始的回调函数

onEnd：function 列表单元拖放结束后的回调函数

onAdd：function 列表单元添加到本列表容器的回调函数

onUpdate：function 列表单元在列表容器中的排序发生变化后的回调函数

onRemove：function 列表元素移到另一个列表容器的回调函数

onFilter：function 试图选中一个被filter过滤的列表单元的回调函数

onMove：function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数

onClone：function 当创建一个列表单元副本的时候的回调函数 事件对象： 事件对象在各个函数中略有不同，可通过输出对象查看对象的属性，

<draggable
  :group='{name: "menu", put: true}'
  :sort="false"
  :value="collections">
  <span v-for='collection in collections' :key='collection.id'>
    {{collection.fieldName}}
  </span>
</draggable>

<draggable
  :group='{name: "menu", put: false}'
  :sort='false'
  class="draggableA"
  :value="notCollectedMenus">
  <span v-for='menu in notCollectedMenus' :key='menu.id' class="aaa">
   {{menu.fieldName}}
  </span>
</draggable>

data() {
  return {
    collections: [
      { id: 1, formId: 1, fieldName: '单选', fieldType: '3', fieldLable: '单选', placeholder: '', defaultValue: '', optionsValue: '', optionSettings: [], fieldLocked: 0, required: '0', bequeried: '0', showInlist: '0' },
      { id: 2, formId: 1, fieldName: '多选', fieldType: '4', fieldLable: '多选', placeholder: '', defaultValue: '', optionsValue: '', optionSettings: [], fieldLocked: 0, required: '0', bequeried: '0', showInlist: '0' },
      { id: 3, formId: 1, fieldName: '单行文本', fieldType: '0', fieldLable: '单行文本', placeholder: '', defaultValue: '', optionsValue: '', optionSettings: [], fieldLocked: 0, required: '0', bequeried: '0', showInlist: '0' },
      { id: 4, formId: 1, fieldName: '多行文本', fieldType: '1', fieldLable: '多行文本', placeholder: '', defaultValue: '', optionsValue: '', optionSettings: [], fieldLocked: 0, required: '0', bequeried: '0', showInlist: '0' },
      { id: 5, formId: 1, fieldName: '下拉框', fieldType: '2', fieldLable: '下拉框', placeholder: '', defaultValue: '', optionsValue: '', optionSettings: [], fieldLocked: 0, required: '0', bequeried: '0', showInlist: '0' }
    ],
    availableMenus: [],
  }
},