mp-vue拖拽組件的實現

作為一個效率還不錯的小前端，自己的任務做完之后真的好閑啊，千盼萬盼終於盼來了業務的新需求，他要我多加一個排序題，然后用戶通過拖拽來排序，項目經理看我是個實習生，說有點復雜做不出來就算了，我這么閑的一個人，怎么可能做不出來，慢慢磨也能磨出來好嗎。

當然一開始想向大佬們學習一手，搜了半天，實現效果不佳，我以為我真的搞不出來了，可是就在我准備自己搞的時候發現了一個大佬寫好了的組件，我就去npm了一手，可是報了一堆錯，於是我直接去找了人家的源碼hhh，研究了一手之后，開始往我的組件里套......

因為寫的是小程序嘛，因此用了小程序的movable-view，人家有可以拖拽的東西直接用何必自己亂整呢，微信開發文檔里面也說了movable-view只能在movable-area里面使用，當然這里面還有一些東西要配置一下，配置好了就可以實現拖動啦，於是乎按照人家的代碼依葫蘆畫瓢結果：

<movable-area class="drag-sort" :style="{height: currentList.length * height + 'px'}" id="drag">
      <movable-view
      v-for="(item, index) in currentList"
      :key="index"
      :x="0"
      :y="item.y"
      direction="vertical"
      disabled
      damping="40"
      :animation="item.animation"
      class="drag-sort-item"
      style="height:50px"
      @touchstart="touchstart"
      @touchmove="touchmove"
      @touchend="touchend"
      catchtouchstart
      catchtouchmove
      catchtouchend
      :class="{'active': active == index, 'vh-1px-t': item.index > 0}">
        <view class="item">{{item.tabcontent}}</view>
      </movable-view>
    </movable-area>

在頁面加載的時候拿到要拖拽的數組，然后結構一下加入其他需要的信息，比如下標（畢竟后端要這個順序）

let arr = []
      for (const key in this.list.tabList) {
        arr.push({
          ...this.list.tabList[key],
          index: Number(key),
          y: key * this.height,
          animation: true
        })
      }
      this.currentList = arr

然后就是拖動事件balabala

/**
     * 開始拖拽的位置記錄
     * @date 2019/09/18
     */
    touchstart (e) {
      // 計算y軸點擊位置
      var query = wx.createSelectorQuery()
      query.select('#drag').boundingClientRect()
      query.exec((res) => {
        this.topY = res[0].top
        let touchY = e.mp.touches[0].clientY - res[0].top
        this.deviationY = touchY % this.height
        for (const key in this.currentList) {
          if ((this.currentList[key].index * this.height < touchY) && ((this.currentList[key].index + 1) * this.height > touchY)) {
            this.active = key
            this.index = this.currentList[key].index
            break
          }
        }
      })
    },
    /**
     * 觸摸移動
     * @date 2019/09/18
     */
    touchmove (e) {
      if (this.active < 0) return
      let touchY = (e.mp.touches[0].clientY - this.topY) - this.deviationY
      this.currentList[this.active].y = touchY
      this.currentList[this.active].animation = false
      for (const key in this.currentList) {
        // 跳過當前操作的item
        if (this.currentList[key].index !== this.currentList[this.active].index) {
          if (this.currentList[key].index > this.currentList[this.active].index) {
            if (touchY > this.currentList[key].index * this.height - this.height / 2) {
              this.currentList[this.active].index = this.currentList[key].index
              this.currentList[key].index = this.currentList[key].index - 1
              this.currentList[key].y = this.currentList[key].index * this.height
              break
            }
          } else {
            if (touchY < this.currentList[key].index * this.height + this.height / 2) {
              this.currentList[this.active].index = this.currentList[key].index
              this.currentList[key].index = this.currentList[key].index + 1
              this.currentList[key].y = this.currentList[key].index * this.height
              break
            }
          }
        }
      }
    },
    /**
     * 拖拽事件結束傳遞參數信息給父組件
     * @date 2019/09/18
     */
    touchend (e) {
      if ((this.index !== this.currentList[this.active].index) && (this.active > -1)) {
        this.$emit('change', {
          // 拖拽結束后的內容
          updateList: this.currentList
        })
      }
      this.currentList[this.active].animation = true
      this.currentList[this.active].y = this.currentList[this.active].index * this.height
      this.active = -1
    }

一個可拖拽的組件就寫好了，要什么信息再自己后期加就是了hhh