Vue.Draggable实现从左到右拖拽功能

Vue.Draggable实现从左到右拖拽功能_第1张图片

功能描述:

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,否则从左侧拖到右侧时,没有接收的地方,则拖放失效





 

你可能感兴趣的:(VUE)