如何在小程序中实现拖动区域进行排序功能？

本文共计1098个文字，预计阅读时间需要5分钟。

小程式滑动区域排序功能代码，供参考，内容如下：

pythonimport tkinter as tk

class SortAreaApp: def __init__(self, root): self.root=root self.root.title(滑动区域排序)

self.area_list=[区域1, 区域2, 区域3, 区域4] self.create_widgets()

def create_widgets(self): self.canvas=tk.Canvas(self.root, width=300, height=200) self.canvas.pack()

self.create_areas()

self.sort_button=tk.Button(self.root, text=排序, command=self.sort_areas) self.sort_button.pack()

def create_areas(self): for i, area in enumerate(self.area_list): x=50 + i * 50 y=50 self.canvas.create_oval(x, y, x + 50, y + 50, fill=blue, outline=black, tags=area) self.canvas.create_text(x + 25, y + 25, text=area, tags=area)

def sort_areas(self): self.canvas.delete(all) self.area_list.sort() for i, area in enumerate(self.area_list): x=50 + i * 50 y=50 self.canvas.create_oval(x, y, x + 50, y + 50, fill=blue, outline=black, tags=area) self.canvas.create_text(x + 25, y + 25, text=area, tags=area)

if __name__==__main__: root=tk.Tk() app=SortAreaApp(root) root.mainloop()

要求：- 点击蓝色圆形图标，所有区域展开或收起切换。- 当所有区域收起时，点击区域头部文字或空白处可展开。

小程序拖动区域进行排序的具体代码，供大家参考，具体内容如下

需求：点击蓝色圆圈图标，所有区域进行展开或者收起切换，当所有区域收起时，点击区域头部文字或者空白处可进行拖动排序，效果如下：

本人新手，比较菜鸟，借鉴别的大佬，可能写的low，代码如下，欢迎指教：

一、html部分

<view class="area-section">     <block wx:for="{{areaData}}" wx:for-item="areaItem" wx:key='index'>         <view class="areaItem {{moveIndex == index ? 'move' : ''}}" style="top: {{top}}px" >             <view class="head">         <view class="head-sort" catchtap="changeShowSateEvent"></view>                 <view class="head-name"                  catchtouchstart="moveStartEvent"         catchtouchmove="moveEvent"                  catchtouchend="moveEndEvent"         data-index="{{index}}"                 data-item = "{{areaItem}}"         >{{areaItem.name}}</view>             </view>             <view class="container" style="display: {{areaItem.display}}">                 <block wx:for="{{areaItem.list}}" wx:key="index">                     <view class="item">{{item}}</view>                 </block>             </view>       </view>     </block> </view>

二、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       })     }   } })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。