全国服务热线:4008-888-888

技术知识

微信小程序在哪里_微信小程序之拖拽排序(代码

微信小程序之拖拽排序(代码分享)       本篇文章主要分享了微信小程序拖拽排序的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
view bindtap="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'}}" {{item.content}} /view /view /view

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 this.data.content.length; i++){
 arr.push(this.data.content[i]);
 var nx = this.data.content.length;
 n=1;
 for(var k=2; k 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;}

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




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服