小程序拖拽排序

原文链接： https://juejin.im/post/5afec7e4518825672f1a1f92

需求说明

长按列表的某一行，拖拽排序。

逻辑分析

1. 小程序的组件movable
2. 事件touchstart、longpress、touchmove、touchend的控制
3. 数据多时要取消掉页面的滚动事件
4. 数组的重新排序
5. 通过防抖进行优化

代码实现

.wxml

"section">
  'touchlong' bindtouchend='touchend' bindtouchstart='touchs' bindtouchmove='touchm' bindtouchstart='touchs' scroll-y="{{canScroll}}" bindscroll="bindscroll" style='height: 500px'>
    "height: {{hei}}px; width: 100%; ">
      "height: 60px; width: 100%; border:1px solid #000;background:rgba(0,0,0,1)" x="{{x}}" y="{{y}}" direction="vertical"  disabled="{{disabled}}" damping="{{5000}}" friction="{{1}}" hidden="{{hidden}}">
        {{content}}
      
      "box">
        for="{{data}}">{{item}}
      
    
  

复制代码

.js

Page({
  data: {
    x: 0,
    y: 0,
    disabled: true,
    flag: false,
    data: ["111111111111111","22222222222222","333333333333","444444444444","5555555555555","666666666666","7777777777777","8888888888","999999999999999999","aaaaaaaaaaa","bbbbbbbbbbbbb","cccccccccccc","dddddddddddddd","eeeeeeeeeeee"],
    content: "",
    hidden: true,
    hei: 500,
    canScroll: true
  }, 
  onShow: function () {
    this.scrollTop = 0;
    this.setData({
      hei: this.data.data.length * 60 + 50
    })
  },
  touchlong: function(e) {
    console.log(e)
    let index = this.getIndex(e.touches[0].pageY - 40 + this.scrollTop);
    this.indexFirst = index
    this.flag = true,
    this.setData({
      x: e.touches[0].pageX + this.scrollTop,
      y: e.touches[0].pageY - 40 + this.scrollTop,
      content: this.data.data[index],
      hidden: false,
      canScroll: false
    })
  },
  bindscroll: function(e) {
    this.scrollTop = e.detail.scrollTop
    console.log(this.scrollTop)
  },
  touchs: function (e) {
    //将闭包函数保存为局部全局变量
    this.f = this.debounce(this.move, 20);
  },
  //防抖-去除部分过快的操作
  debounce: function (func, wait) {
    var timeout, result;
    var args = arguments;
    return function (e) {
      var context = this;
      clearTimeout(timeout)
      timeout = setTimeout(function () {
        result = func.call(context, e)
      }, wait);
      return result;
    }
  },
  move: function (e) {
    console.log("++++++++++++++++++++++++++++++")
    this.setData({
      y: e.touches[0].pageY + this.scrollTop
    })
  },
  touchm: function (e) {
    console.log(111)
    if (this.flag) {
      this.f(e)
    }
  },
  getIndex: function(y) {
    let index = Math.ceil(y/60)
    return index;
  },
  sorter: function(index) {
    let data = this.data.data
    if (index > data.length - 1) { index = data.length - 1 }
    if (index < 0) { index = 0 }
    let indexFirst = this.indexFirst 
    //向后移动
    if(this.indexFirst < index) {
      let tem = data[indexFirst];
      for (let i = indexFirst; i < index;i ++) {
        data[i] = data[i + 1]
      }
      data[index] = tem;
    }
    //向前移动
    if (this.indexFirst > index) {
      let tem = data[indexFirst];
      for (let i = indexFirst; i > index; i--) {
        data[i] = data[i - 1]
      }
      data[index] = tem;
    }
    
    this.setData({
      data: data
    })
  },
  touchend: function (e) {
    let index = this.getIndex(e.changedTouches[0].pageY - 40 + this.scrollTop)
    if(this.flag) {
      this.sorter(index)
    }
    this.flag= false;
    this.setData({
      hidden: true,
      canScroll: true
    })
  },
})
复制代码

.wxss

.box view{
  height: 60px;
  font-size: 30px;
  text-align: center;
}
复制代码

end

第一次发文章内心有点忐忑，以后要经常总结来提升自己，前端路漫漫。

转载于:https://juejin.im/post/5afec7e4518825672f1a1f92