功能描述:
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'