Taro 小程序拖拽排序

[sisterAn]

实现步骤

1. 拖拽排序实现

这一块不是难点，主要是movable-view，movable-area及一些页面逻辑的计算（当前拖拽的控件，拖拽到什么地步进行排序）。

需要注意：排序时setState/setData的延时，可能会引起多次排序错乱

2. 性能优化

在简单的拖拽排序基本实现后，我们需要关注它的性能及流畅度。
由于我们的contents(拖拽排序数组)中设计textarea、video等原生控件。

1. 页面滑动的时候，可能出现textarea、video凌驾于navigator或其他高层级组件上

这是因为textarea、video为原生组件，脱离在 WebView 渲染流程外，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上，
为了解决原生组件层级最高的限制，小程序专门提供了 cover-view 、 cover-image组件，可以覆盖在部分原生组件上面。我们需要把在textarea、video层次上的组件写到cover-view中。

2. 滑动页面的时候，当滑动落在textarea上时，可能出现页面卡顿的现象

这是因为我们把contents(拖拽排序数组)写在了scroll-view 中，而滑动手势落在textarea上时，textarea的层级在scroll-view之上，操作会被textarea拦截,就不会作用到scroll-view滚动上，这时，两者只能选其一，textarea是我们必须要有的功能，如果用伪多行输入又会造成更多的性能问题，如果你有更好的方案，可以试一下，这里我们去除scroll-view

出现的问题： 获取页面滚动问题

由于我们通过页面的clientY以及scrollY来得到当前拖拽控件及拖拽路径，而不使用scroll-view后无法scroll-view滚动的距离，这时，需要使用页面的onPageScroll方法

onPageScroll () {
    let that = this;
    var query = Taro.createSelectorQuery()
    query.select('.content-view').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function(res) {
      that.setState({
        scrollPosition: {
          scrollTop: res[1].scrollTop,
          scrollY: that.state.scrollPosition.scrollY
        },
      })
    })
  }

3. 文本控件拖拽时，textarea没有跟随移动

由于textarea不是position: fixed的，所以fixed={true}无效，我这里的解决方法是把拖拽的时movable-view的文本框设为text组件。

3. 后续

后续如果继续优化，我会不断更新，感谢你的阅读