微信小程序列表拖動排序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; },