功能描述:
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,否则从左侧拖到右侧时,没有接收的地方,则拖放失效
请将左侧内容拖到右侧进行配置
{
{ element.name }}
{
{ element.name }}