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

功能描述:

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

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

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

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

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

实现方法:

1、左右json格式如下:

[crayon-5f94460ea859b510080959/]

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.DRAGGABLE实现从左到右拖拽功能
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏