小程序拖动区域实现排序效果小程序拖动区域实现排序效果

小程序拖动区域进行排序的具体代码，供大家参考，具体内容如下
需求：点击蓝色圆圈图标，所有区域进行展开或者收起切换，当所有区域收起时，点击区域头部文字或者空白处可进行拖动排序，效果如下：

文章图片

本人新手，比较菜鸟，借鉴别的大佬，可能写的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,y2Page({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.areaDataareaList.forEach( (item)=>{item.display = 'flex'})this.setData({areaData: areaList})console.log(this.data.areaData)},// 点击绿色圆，子区域集体或者隐藏，或者展开changeShowSateEvent: function(){let currentAreaShowState = this.data.currentAreaShowStatelet areaList = this.data.areaDataareaList.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.indexy = 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.indexconsole.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.moveIndexlet areaData = https://www.it610.com/article/this.data.areaDatalet areaItem = e.currentTarget.dataset.itemlet positionIndex = 0console.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>15positionIndex = 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})}}})

【小程序拖动区域实现排序效果】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。