微信小程序之拖拽排序(代码分享)

前端之家收集整理的这篇文章主要介绍了微信小程序之拖拽排序(代码分享)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

index.wxml

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: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),arr1[currindex-1]); arr1 = []; for(var m=0; m

index.wxss

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

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

原文链接:https://www.f2er.com/weapp/42249.html

猜你在找的微信小程序相关文章