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

效果图


.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 / columns
    for(let i = 0;i < list.length;i++){
      numY = i / columns | 0
      numX = i - numY * columns
      list[i].row = numX
      list[i].i = i
      location.push({
        x:numX * w,
        y:numY * w 
      })
    }
    this.setData({
      w,
      list,
      location,
    })
  },
  /** 选中 */
  touchS(e){
    this.data.startX = e.touches[0].clientX
    this.data.startY = e.touches[0].clientY
    const index = e.currentTarget.dataset.index
    this.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.row
    if(selectX >= columns || selectX < 0){
      return
    }
    const stx = (select / columns | 0) * columns
    const lon = selectX + stx 
    const site = ((y > 0 ? y + f : y - f) / w | 0) * columns + lon
    if(!list[site] || o.n === site){
      return
    }
    let num
    if(site !== select || list[o.n].i !== select){
      for(let i = 0;i < list.length;i++){
        if(i !== select && list[i].i === site){
          num = i
          break;
        }
      }
    }else{
      num = o.n
    }
    list[num].i = o.n
    list[select].n = site
    this.setData({
      list,
    })
  },
  /** 结束 */
  touchE(){
    var that = this
    const list = that.data.list,select = that.data.select,columns = this.data.columns
    let numY,numX;
    list[select].i = list[select].n
    list.sort((a,b) => a.i - b.i)
    for(let i = 0;i < list.length;i++){
      numY = i / columns | 0
      numX = i - numY * columns
      list[i].row = numX
    }
    that.setData({
      animation:false
    },() => {
      that.setData({
        select:-1,
        moveX:0,
        moveY:0,
        list,
      },() => {
        setTimeout(() => {
          that.setData({
            animation:true
          })
        },300)
      })
    })
  },
})

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

相关推荐
鲲鹏猿42 分钟前
微信小程序——早餐小程序
微信小程序·小程序
The_era_achievs_hero1 小时前
UniappDay04
vue.js·微信小程序·uni-app
老虎062714 小时前
JavaWeb(苍穹外卖)--学习笔记13(微信小程序开发,缓存菜品,Spring Cache)
笔记·学习·微信小程序
郭邯19 小时前
小程序中自定义组件的样式隔离
微信小程序
每天开心21 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
老华带你飞1 天前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
尸僵打怪兽1 天前
HBuilder X打包发布微信小程序
微信小程序·小程序·打包·hbuilder x
半生过往2 天前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw2 天前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
996幸存者2 天前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app