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

{{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;}