微信小程序 拖拽排序demo

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>

wxss:

.container {
height: 100%;
displa
4000
y: 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;}

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