微信小程序中拖动排序代码怎么编写?

时间：2023-07-01 14:05 阅读数：80 人阅读分类：网站建设

　　大家在使用微信的时候，特别是发布一些很长的文章时，就需要实现拖动效果，当然这只是其中一项，这个是需要代码来实现的，下面小编就来大家详细说说这个代码是如何编写的，有兴趣的朋友可以来学习下!

　　编码如下：

　　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

　　arr.push(this.data.content[i]);

　　}

　　var nx = this.data.content.length;

　　n=1;

　　for(var k=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(var m=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

　　})

　　}

　　})

　　大家只要在写小程序的时候，把这一段代码复制下，应该就能做到拖动的效果哦，当然如果大家觉得微微风小编推荐的这个代码很繁琐的话，也希望更多朋友提供一些简单易学的办法，和更多专业人士一起交流，一起进步!