25行代码解决小程序的拖拽排序

// 初始点击
    stratBtn(e){
        let index = http.dataIndex(e)[0];//获取当前点击的列表
        let busArr = this.data.busArr;//获取列表中的所有数组
        let pageY = Number(e.touches[0].pageY);//初始点击的Y点坐标
        let busActObj = busArr[index];//单独记录当前点击的数据
        this.setData({  //保存数据
            sPageY:pageY,
            mPageY:pageY,
            moveSortBox:true,
            clickIndex:index,
            busActObj:busActObj
        })
    },
    // 开始移动
    moveBtn(e){
        let pageY = Number(e.touches[0].pageY); //记录移动点的坐标
        this.setData({ //记录
            mPageY:pageY,
            moveSortBox:true,
        })
    },
    // 结束点击
    endBtn(e){
        let sPageY = Number(this.data.sPageY); //获取初始点的坐标
        let busArr = this.data.busArr; //获取数组
        let pageY = Number(e.changedTouches[0].pageY);//获取结束点的坐标
        let clickIndex = Number(this.data.clickIndex); //初始点的位置
        let busActObj = this.data.busActObj;//获取初始点的列表单独数据
        let position = parseInt((pageY-sPageY)/90)+(clickIndex+1); //每个盒子固定高度90px  (结束点-初始点/盒子高度)+(初始点的位置+1)可以得到移动的位置
        busArr.splice(clickIndex,1);//删除初始数据
        busArr.splice(position,0,busActObj);//在移动点重新插入数据
        this.setData({//保存
            moveSortBox:false,
            busArr:busArr
        })
    },

看看效果

25行代码解决小程序的拖拽排序_第1张图片25行代码解决小程序的拖拽排序_第2张图片25行代码解决小程序的拖拽排序_第3张图片搞定收工

你可能感兴趣的:(微信小程序)