微信小程序拖拽排序

实现

1. 代码展示

 <movable-view
                wx:for="{{movableFields}}" wx:key="key"
                direction="all"
                animation="{{false}}"
                disabled="{{isMovingIndex != index}}"
                class="card {{showListCopy ? 'default-movable-card' : ''}} movable-card {{isMovingIndex === index ? 'is-moving' : ''}}"
                bind:longpress="handleMoveStart"
                bindchange="handleMoveChange"
                bind:touchcancel="handleMoveEnd"
                bind:touchend="handleMoveEnd"
                y="{{item.y}}"
                data-type="{{item.type}}" data-index="{{index}}"
                style="{{item.readOnly ? 'background-color: #eee;' : ''}}"
        >
          <template is="my-card-sort" data="{{item,info,selectedStyle}}"/>
        </movable-view>

2. 使用微信小程序自带的组件api
   
3. 循环遍历数组，展现需要拖拽的列表（数组里有不同的y）,通过y值控制每块的位置
   
4. 事件处理

handleMoveStart(e) {
      //当前点击的索引
      let currentIndex = e.currentTarget.dataset.index || 0;
      this.setData({
        isMovingIndex: currentIndex || 0,
        movableFieldsType:e.currentTarget.dataset.type||'',
        showListCopy:true
      })
    },

handleMoveEnd(e) {
      const that = this;
      that.setData({
        movingLock: true
      })
      let movableFields = that.data.movableFields;
      movableFields = movableFields.sort((a, b) => {
        return a.y - b.y;
      })
      movableFields.forEach((item, index) => {
        item.y = index * that.data.singleCardHeight + 1;
      })
      that.setData({
        movableFields: movableFields,
        movableFieldsCopy: movableFields,
        sortOrder: movableFields.map(item => item.key),
        movingLock: false,
        isMovingIndex: -1,
        // currentPosIndex:-1,
        showListCopy:false,
        movableFieldsType:''
      })
    },

    handleMoveChange(e) {
        const that = this;
        if (that.data.movingLock) {
            return false;
        }
        let currentItemTop = e.detail.y;
        let movableFields = that.data.movableFields;
        // 注意这个是实现拖拽时，块自动走到原来的位置---类似支付宝的付款顺序的排序
        let testList=JSON.parse(JSON.stringify(that.data.movableFields))
        testList[e.currentTarget.dataset.index].y=currentItemTop
        testList = testList.sort((a, b) => {
            return a.y - b.y;
        })
        testList.forEach((item, index) => {
            item.y = index * that.data.singleCardHeight + 1;
        })
        // 移动端卡顿解决
        if(JSON.stringify(that.data.movableFieldsCopy) !== JSON.stringify(testList)){
            that.setData({
                movableFieldsCopy:testList,
            })
        }
        movableFields[e.currentTarget.dataset.index].y=currentItemTop
    },

5. 类似支付宝的付款顺序的排序的原理
   2个一样的数组，都渲染到页面上，需要拖拽的放到上面（z-index），长按时除了当前块透明度不为0，然后拖拽时另一个数组动态根据y值更新数组（sort+forEach处理）

注意

滚动穿透：测试时ios在长按拖动时有可能造成页面滚动，解决方法，在最外层
catchtouchmove="{{showListCopy?'handleTouchMove':''}}"
handleTouchMove方法你啥也不用写（长按时showListCopy为true）