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

您所在的位置:网站首页 h5拖放 VUE.DRAGGABLE实现从左到右拖拽功能

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

2023-05-03 02:43| 来源: 网络整理| 查看: 265

功能描述:

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 }} import draggable from "vuedraggable"; import Vue from "vue"; export default { components: { draggable }, data() { return { blnShowDlg: false, dlgType: "add", // 窗口类型 titleName: "", // 窗口标题显示 settingData: {}, //获取左右配置数据 dataFormStore:{},//保存数据 left:[],//左边数据 right:[],//右边数据 drag:false, }; }, computed: { dragOptionsL() { return { disabled: false, ghostClass: "ghostL"//注意:在左侧上下移动时,使用这个类;移动到右侧时,使用ghostR类!!! }; }, dragOptionsR() { return { animation: 500, disabled: false, ghostClass: "ghostR"//注意:在右侧上下移动时,使用这个类; }; } }, methods: { /** 1、显示弹框 row不传为添加 传参为修改 */ showDlg(row) { this.titleName = "页面配置"; this.dlgType = "edit"; this.blnShowDlg = true; this.dataFormStore = this.$common.deepCopy(row);//存储原始数据 this.left=row.left; this.right=row.right; this.restoreForm(); }, // 2 左侧list移动,禁止在左侧上下移动 checkMove(evt){ let classObj=evt.to.className; if(evt.draggedContext.element.id===""){ return false; }else if(classObj.indexOf("lul")>-1){ return false; } }, // 2.1 拖拽事件,添加时隐藏左侧添加的数据 dragChangeR(evt) { if(evt.added){//这时候已经添加了 this.$refs[`li${evt.added.element.indexid}`][0].style.display='none'; } }, // 3 删除 deleteItme(element,index){ this.right.splice(index,1); this.$refs[`li${element.indexid}`][0].style.display='block'; }, // 4 取消 closeDialog() { this.blnShowDlg = false; }, // 5 关闭 hidDlg() { this.blnShowDlg = false; }, /** 6 修改-还原 */ restoreForm() { this.left=this.$common.deepCopy(this.dataFormStore.left); this.right=this.$common.deepCopy(this.dataFormStore.right); this.filterComs(this.left,this.right); }, /** 7 添加/保存 */ submitForm() { let newright=this.right; let rlens=this.right.length; if(rlens>0){ let idArr=[]; for(let i=0;i 0){ // 初始化,全置为blcok,后面根据right数据过滤显示 for(let i=0;i< left.length;i++){ this.$nextTick(() => { this.$refs[`li${left[i].indexid}`][0].style.display='block'; }); } for(let i=0;i< right.length;i++){ let filteritem=left.filter((element,index,self)=>{ return element.indexid==right[i].indexid; }); // 右侧有数据时,dom生成之后再来渲染,否则会报错:cannot read property '0' of undefined this.$nextTick(() => { this.$refs[`li${filteritem[0].indexid}`][0].style.display='none'; }); } } } } }; //应用样式文件 .ghostL{ opacity:0.5; width:230px; } .ghostR{ opacity:0; width:230px; }


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3