VUE.DRAGGABLE实现从左到右拖拽功能

功能描述：

1、左边【一级、二级、三级】字样是不能拖拽的，【item1、item2…】可以拖拽

2、左边items位置固定，只能向右拖拽，不能上下拖拽，如：item7从左边拖到右边，左边的item7消失，右边增加item7

3、右边items可以自由拖拽，但不能向左拖拽

4、右边items可以删除，如：点击item7的“×”，右边item7消失，左边item7出现

5、重置时，页面回复初始化状态

实现方法：

1、左右json格式如下：

left=[
  {"name": "一级","indexid": 1},
  {"name": "item1", "id": 1,"indexid": 2},
  {"name": "item2","id": 2,"indexid": 3},
  {"name": "二级","indexid": 4},
  {"name": "item3","id": 3,"indexid": 5},
  {"name": "item4","id": 4,"indexid": 6}
   ...
];
right=[
  {"name": "item8","id": 8,"indexid": 10},
  {"name": "item7","id": 7,"indexid": 9}
]

2、dom原始使用flex布局，拖拽时使用vue.Draggable插件，

下载地址：https://github.com/SortableJS/Vue.Draggable#start-of-content

演示地址：https://sortablejs.github.io/Vue.Draggable/#/simple

3、一开始左边加载所有的items，右边加载展示的items，注意：左边要过滤掉(隐藏)右边有的items，参考filterComs(left,right)方法;

在渲染dom、移动、删除时，通过操作dom来实现展示与隐藏；

4、左边draggle插件，:group=”{ name: ‘dragobj’, pull: ‘clone’, put: false}” 

{    name: ‘dragobj’取相同名字的可以来回拖拽；pull: ‘clone’从左向右克隆，后面用右边draggle插件的dragChangeR()方法让左侧数据隐藏了，left并不是真正的删除这条数据；put: false 禁止从右向左拖放数据   }

:move=”checkMove” 移动时绑定checkMove方法，判断是上下还是向右移动，上下时，不执行拖拽；向右时，执行

5、右边draggle插件的deleteItme(element,index)方法实现删除时，right数据-1，左侧显示该条数据

6、【重置】时，重新调用this.filterComs(this.left,this.right);即可

7、问题：从左往右移动时，右侧一直会出现items的name值，拖拽结束后，name值消失，

解决方法：左右分别绑定一个v-bind=”dragOptionsL”，v-bind=”dragOptionsR”

8、问题：当右侧没有任何的items时，需要给右侧v-for循环的父元素指定一个min-height，否则从左侧拖到右侧时，没有接收的地方，则拖放失效