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

效果图

.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，很少看博客，对你有帮助别忘记点赞收藏。