您现在的位置是：网站首页> 编程资料编程资料
小程序拖动区域实现排序效果_javascript技巧_
2023-05-24
368人已围观
简介 小程序拖动区域实现排序效果_javascript技巧_
小程序拖动区域进行排序的具体代码，供大家参考，具体内容如下
需求：点击蓝色圆圈图标，所有区域进行展开或者收起切换，当所有区域收起时，点击区域头部文字或者空白处可进行拖动排序，效果如下：
本人新手，比较菜鸟，借鉴别的大佬，可能写的low，代码如下，欢迎指教：
一、html部分
{{areaItem.name}} {{item}}
二、css部分
/* pages/move/move.wxss */ .area-section{ position: relative; } .areaItem{ margin: 0 30rpx; margin-bottom: 40rpx; padding-left: 20rpx; box-sizing: border-box; } .areaItem .head{ display: flex; align-items: center; height: 80rpx; line-height: 80rpx; } .areaItem .head-sort{ width: 40rpx; height: 40rpx; border-radius: 20rpx; background-color: turquoise; margin-right: 20rpx; } .areaItem .head .name{ flex: 1; } .areaItem .container{ display: flex; flex-wrap: wrap; } .areaItem .container .item{ width: 315rpx; height: 200rpx; background-color: rgb(88, 177, 177); color: white; border-radius: 20rpx; box-shadow: 0rpx 3rpx 8rpx rgb(83, 82, 82); margin: 20rpx 0; margin-right: 20rpx; display: flex; justify-content: center; align-items: center; } .areaItem .container .item:nth-of-type(2n){ margin-right: 0rpx; } .move{ box-shadow: 1px 1px 10rpx rgba(3, 129, 87, 0.685); background-color: rgba(255, 255, 255, 0.603); border-radius: 20rpx; position: absolute; width: 670rpx; }三、js部分
let y,y1,y2 Page({ data: { areaData: [ { name: "北华街1栋", list: ["北华101","北华102"] }, { name: "东林街2栋", list: ["东林101","东林102","东林103"] }, { name: "季南街3栋", list: ["季南101","季南102","季南103"] }, { name: "丘亭街4栋", list: ["丘亭101","丘亭102"] } ], currentAreaShowState: true, moveIndex: -1 }, onLoad: function(){ this.initData() }, // 初始化处理数据 initData: function(){ let areaList = this.data.areaData areaList.forEach( (item)=>{ item.display = 'flex' }) this.setData({ areaData: areaList }) console.log(this.data.areaData) }, // 点击绿色圆，子区域集体或者隐藏，或者展开 changeShowSateEvent: function(){ let currentAreaShowState = this.data.currentAreaShowState let areaList = this.data.areaData areaList.forEach( (item)=>{ currentAreaShowState ? item.display = 'none' : item.display = 'flex' }) this.setData({ currentAreaShowState: !currentAreaShowState, areaData: areaList }) }, // 当所有子区域隐藏，区域才可以拖拽排序 // 点击区域头部拖拽 moveStartEvent: function(e){ if(!this.data.currentAreaShowState){ console.log(e) let moveIndex = e.currentTarget.dataset.index y = e.touches[0].clientY; y1 = e.currentTarget.offsetTop;//是事件绑定的当前组件相对于父容器的偏移量 this.setData({ moveIndex: moveIndex, top: y1//移动盒子所在的位置 }) } }, moveEvent: function(e){ if(!this.data.currentAreaShowState){ let moveIndex = e.currentTarget.dataset.index console.log(e) y2 = e.touches[0].clientY - y + y1; this.setData({ moveIndex: moveIndex, top: y2 }) } }, moveEndEvent: function(e){ if(!this.data.currentAreaShowState){ let moveIndex = this.data.moveIndex let areaData = this.data.areaData let areaItem = e.currentTarget.dataset.item let positionIndex = 0 console.log(y2) if(y2>(areaData.length-1)*55){ positionIndex = areaData.length-1 }else if(y2<=5){ positionIndex = 0 }else{ if(y2%((80+30)/2)>15){//(行高+行间距)/2>15 positionIndex = parseInt(y2/((80+30)/2))+1 }else{ positionIndex = parseInt(y2/((80+30)/2)) } } console.log(positionIndex) if(positionIndex != moveIndex){ if(positionIndex > moveIndex){ areaData.splice(positionIndex+1,0,areaItem) areaData.splice(moveIndex,1) }else if(positionIndex < moveIndex){ areaData.splice(positionIndex,0,areaItem) areaData.splice(moveIndex+1,1) } } this.setData({ areaData: areaData, moveIndex: -1 }) } } }) 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
