微信小程序之拖拽排序的实现代码

 {{item.content}}

//index.js

//获取应用实例

varapp = getApp();

varx,y,x1,y1,x2,y2,index,currindex,n,yy;

vararr1 = [{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){

  vararr = [];

  for(vari=0; i

  arr.push(this.data.content[i]);

  }

  varnx =this.data.content.length;

  n=1;

  for(vark=2; 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(varm=0; m

  console.log(arr[m]);

  arr[m].id = m+1;

  arr1.push(arr[m]);

  }

  // console.log(arr1);

  this.setData({

  mainx:"",

  content:arr,

  opacity:1

  })

 }

 }

})

.container {

 height:100%;

 display: flex;

 flex-direction: column;

 align-items:center;

 justify-content: space-between;

 padding:200rpx0;

 box-sizing: border-box;

}

.box{width:300px;position:relative}

.main{width:90%;height:50px;background:#eee;border:1pxsolid#ccc;margin:2pxauto;text-align:center;line-height:50px;}

.mainmove{position:absolute; opacity:0.7}

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

.mainend{position:static; opacity:1;}