WeChat mini-app drag-and-drop sorting (code sharing)

Drag-and-drop sorting of applets (code sharing)

Index. wxml

<!--index.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>

Index. js

// Index. js // obtain the application instance 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.tar get. 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); console. log (arr1) 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 })}}})

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

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!