当前位置：首页 > news >正文

微信小程序拖拽排序有效果图

news 来源：原创 2025/4/23 6:31:58

效果图

请添加图片描述

.wxml

<view class="container" style="--w:{{w}}px;" wx:if="{{location.length}}"><view class="container-item" wx:for="{{list}}" wx:key="index" data-index="{{index}}"style="--c:{{item.color}};transform:translate3d({{location[item.i].x}}px, {{location[item.i].y}}px, 0);{{select === index?'z-index:1;left:'+moveX+'px;top:'+moveY+'px;':animation?'transition: transform 0.3s;':''}}" bind:touchstart="touchS" bind:touchmove="touchM" bind:touchend="touchE">{{item.num}}</view>
</view>

.wxss

.container{position: relative;width: 100%;
}
.container-item{width: var(--w);height: var(--w);background: var(--c);position: absolute;left: 0;top: 0;display: flex;align-items: center;justify-content: center;font-size: 48rpx;color: #fff;
}

.js

Page({data: {list:[{color:'#000',num:1},{color:'#f37b1d',num:2},{color:'#39b54a',num:3},{color:'#0081ff',num:4},{color:'#e54d42',num:5},{color:'#e03997',num:6},{color:'#FF66CC',num:7},{color:'#003399',num:8},{color:'#99FFFF',num:9},],/** 拖拽列表宽度 */width:wx.getWindowInfo().windowWidth,/** 每行显示个数 */columns:4,/** 选中元素 */select:-1,/** 位置 */location:[],/** 动画 */animation:true,},onLoad(){let w = this.data.w,list = this.data.list,location = [],columns = this.data.columns,numY,numX;w = this.data.width / columnsfor(let i = 0;i < list.length;i++){numY = i / columns | 0numX = i - numY * columnslist[i].row = numXlist[i].i = ilocation.push({x:numX * w,y:numY * w })}this.setData({w,list,location,})},/** 选中 */touchS(e){this.data.startX = e.touches[0].clientXthis.data.startY = e.touches[0].clientYconst index = e.currentTarget.dataset.indexthis.setData({select:index,})this.data.list[index].n = index},/** 拖动 */touchM(e){let list = this.data.list,select = this.data.select,startX = this.data.startX,startY = this.data.startY;const dragX = e.touches[0].clientX,dragY = e.touches[0].clientY;const x = dragX - startX,y = dragY - startY,columns = this.data.columns,w = this.data.w,f = w / 2;this.setData({moveX:x,moveY:y,})const o = list[select]const selectX = ((x > 0 ? x + f : x - f) / w | 0) + o.rowif(selectX >= columns || selectX < 0){return}const stx = (select / columns | 0) * columnsconst lon = selectX + stx const site = ((y > 0 ? y + f : y - f) / w | 0) * columns + lonif(!list[site] || o.n === site){return}let numif(site !== select || list[o.n].i !== select){for(let i = 0;i < list.length;i++){if(i !== select && list[i].i === site){num = ibreak;}}}else{num = o.n}list[num].i = o.nlist[select].n = sitethis.setData({list,})},/** 结束 */touchE(){var that = thisconst list = that.data.list,select = that.data.select,columns = this.data.columnslet numY,numX;list[select].i = list[select].nlist.sort((a,b) => a.i - b.i)for(let i = 0;i < list.length;i++){numY = i / columns | 0numX = i - numY * columnslist[i].row = numX}that.setData({animation:false},() => {that.setData({select:-1,moveX:0,moveY:0,list,},() => {setTimeout(() => {that.setData({animation:true})},300)})})},
})

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。