微信小程序列表拖动排序Demo

wxml页面编写👇

<view class="container">
　　<view bindtap="box" class="box" >
 　　　　<view disable-scroll="true" wx:for="{{content}}" bindtouchmove="move" bindtouchstart="movestart" bindtouchend="moveend" data-index="{{item.id}}" data-main="{{mainx}}" class="main {{mainx == item.id? 'mainmove':'mainend'}}" style="left:{{start.x}}px; top:{{start.y}}px">{{item.content}}</view>
 　　</view>
</view>

　　

wxss部分

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* padding: 200rpx 0; */
  box-sizing: border-box;
}

.box {
  width: 100%;
  position: relative
}

.main {
  width: 94%;
  height: 124rpx;
  background: #FFF;
  margin: 20rpx auto;
  text-align: center;
  /* line-height: 124rpx; */
  position: relative;
}

.mainmove {
  position: absolute;
  opacity: 0.7
}

.maind {
  background: #fff;
  border: 1px dashed #efefef;
}

.mainend {
  position: static;
  opacity: 1;
  display: flex;
}
.containerBox{
  width: 80%;
  height: 124rpx;
  position: absolute;
  top: 0;
  left: 0;
  margin: 20rpx auto;
}

js部分👇

page上方添加👇
var x,y,x1,y1,x2,y2,index,currindex,n,yy;
var arr1 = [{ content:11,id:1 },{ content:22,id:2 },{ content:33,id:3 },{ content:44,id:4 },{ content:55,id:5 }] //这里初始化的时候替换自己要更改的数组

data中空数组变量👇
page(
　　data:{
　　　　mainx:0,
　　　　content:[{ content:11,id:1 },{ content:22,id:2 },{ content:33,id:3 },{ content:44,id:4 },{ content:55,id:5 }], //这里初始化的时候替换自己要更改的数组
　　　　start:{x:0,y:0}
　　}

)
 moveend:function(){
    if(y2 != 0){
      var arr = [];
      for(var i=0; i<this.data.content.length; i++){
          arr.push(this.data.content[i]);
      }
      var nx = this.data.content.length;
      n=1;
      for(var k=2; k<nx; k++){
        if(y2>(52*(k-1)+k*2-26)){
            n=k;
        }
      }
      if(y2>(52*(nx-1)+nx*2-26)){
        n = nx;
      }
      arr.splice((currindex-1),1);
      arr.splice((n-1),0,arr1[currindex-1]);
      arr1 = [];
      for(var m=0; m<this.data.content.length; m++){
        arr[m].idType = m+1;
        arr1.push(arr[m]);
      }
        // console.log(arr1);
      this.setData({
        mainx:"",
        content:arr,
        opacity:1
      })
    }
  },
  move:function(e){
    yy = e.currentTarget.offsetTop;
    x2 = e.touches[0].clientX-x+x1;
    y2 = e.touches[0].clientY-y+y1;
    this.setData({
      mainx:currindex,
      opacity:0.7,
      start:{x:x2,y:y2}
    })
  },
  movestart:function(e){
    currindex = e.target.dataset.index;
    x = e.touches[0].clientX;
    y = e.touches[0].clientY;
    x1 = e.currentTarget.offsetLeft;
    y1 = e.currentTarget.offsetTop;
  },