draggable布局 vue_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插件，

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

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

4、左边draggle插件，:group="{ name: 'dragobj', pull: 'clone'