微信小程序之拖拽排序（代码分享）
index.wxml
<!--index.wxml-->
<viewclass="container">
<viewbindtap="box"class="box">
<viewdisable-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>
index.js
//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<this.data.content.length;i++){
arr.push(this.data.content[i]);
}
varnx=this.data.content.length;
n=1;
for(vark=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(varm=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
})
}
}
})
index.wxss
.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;}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！