微信小程序之拖拽排序（代码分享）

微信小程序之拖拽排序（代码分享）

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

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

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: centhttp://er;

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

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

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: centhttp://er;

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

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: centhttp://er;

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。