首页 > PHP资讯 > 工具库 > 微信小程序之拖拽排序的示例代码

微信小程序之拖拽排序的示例代码

工具库
本篇文章主要分享了微信小程序拖拽排序的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧

index.wxml

  {{item.content}} 

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(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

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持PHP中文网!

以上就是微信小程序之拖拽排序的示例代码的详细内容,更多请关注 第一PHP社区 其它相关文章!

工具库

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持26不支持0