微信小程序之拖拽排序(代码分享)
程序员文章站
2022-06-29 21:47:29
index.wxml
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>
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 }) } } })
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;}
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!