index.wxml

<!--index.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>123456

index.js

//index.js//获取应用实例
var app = getApp();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}];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}
 },
 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;
 },
 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}
 })
 },
 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;
  }
  console.log(arr);
  console.log(arr1)
  arr.splice((currindex-1),1);
  arr.splice((n-1),0,arr1[currindex-1]);
  arr1 = [];
  for(var m=0; m<this.data.content.length; m++){
  console.log(arr[m]);
  arr[m].id = m+1;
  arr1.push(arr[m]);
  }
  // console.log(arr1);
  this.setData({
  mainx:"",
  content:arr,
  opacity:1
  })
 }
 }
})123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263

index.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:300px; position: relative}.main{width: 90%; height:50px; background: #eee; border: 1px solid #ccc; margin:2px auto; text-align: center; line-height: 50px;}.mainmove{position: absolute; opacity: 0.7}.maind{background: #fff; border:1px dashed #efefef;}.mainend{position: static; opacity: 1;}