yunUI是笔者开源的小程序>微信小程序功能库。目前其中包含了一些复杂的功能组件。方便使用。未来它将分为组件、样式、js三者合为一体，但分别提供。
本文所用代码皆来源于组件库中的yImgPro组件。详细代码可至github查看。地址： yunUI 。
npm地址：yun-ui-micro
欢迎大家star！最近有想法对组件库按照新思路进行重构，各位有什么急切需要或常见使用的组件也欢迎提出！一起共建！

场景如下：

首先分析此需求。有两点：

1. 拖动时排序
2. 拖动后排序

单从性能上看，第二个是有优势的。但是从用户体验上看，无疑要选择第一种方案。

除非你的需求是“不能拖动排序”。你可以放心的选择第二种方案。第二种方案在笔者的功能库中也有组件：yImg。本文思路是第一种。

区别于之前写的第二种思路的文章，第一种思路对布局和样式影响很重的点在于：拖动。
拖动时排序意味着这个元素被拖动时不能在原来位置上有“保留”。这很关键，因为我们可以利用“保留”点对第二种方案进行改造使之像第一种效果看齐，但体验上仍有差距。

所以，笔者选择了“定位”position。所有的元素都是定位的，这样拖动时只需要更改transform和z-index即可达到效果。记住这一点，这会带来bug，虽然很好解决。
我的wxml决定这样写：

<view class="container">
    <view class="item-wrap" style="height: {{ itemWrapHeight }}px;">
        <view
            class="item {{cur == index? 'cur':''}} {{curZ == index? 'zIndex':''}} {{itemTransition ? 'itemTransition':''}}"
            wx:for="{{list}}" wx:key="{{index}}" id="item{{index}}" data-key="{{item.key}}" data-index="{{index}}"
            style="transform: translate3d({{index === cur ? tranX : item.tranX}}px, {{index === cur ? tranY: item.tranY}}px, 0px);"
            bind:longpress="longPress" catch:touchmove="touchMove" catch:touchend="touchEnd">
            <view class="info" style="width: {{imgShape.side}}rpx; height: {{imgShape.side}}rpx; padding: 0 {{imgShape.pd}}rpx {{imgShape.pd}}rpx 0;">
                <image mode="aspectFill" src="{{item.data}}"></image>
                <i class="iconfont icon-delete" wx:if="{{showMenuImg}}" bind:tap="onDelImage" data-index="{{item.key}}"></i>
            </view>
        </view>
        <view class="item-sel selectphoto"
            style="transform: translate3d({{selSite.tranX}}px, {{selSite.tranY}}px, 0px); width: {{imgShape.side - imgShape.pd}}rpx; height: {{imgShape.side - imgShape.pd}}rpx;" hidden="{{!canSelPhoto}}" bind:tap="onChooseImage">
            <i class="iconfont icon-jiashang"></i>
        </view>
    </view>
</view>

这个组件被变量控制的样式比yImg组件多了许多，但结构上精简了不少。我们来分析下：
首先，因为定位，子元素脱离文档流，所以我们需要动态为item-wrap元素赋height。
然后是子元素的宽高和padding也是动态的，没事，我们会在初始化时动态的获取它 —— 顺便添加一些我们需要的数据。

初始化发生在用户选择完图片以后。这个函数中干了几件事：

1. 初始化数据。将数组-字符串变成数组-对象，存储初始顺序、未来可能的移动距离、图片本身
2. 获取子项item的宽高（为偏移做准备）、计算当前整个区域高度（所以每次选择完图片都要调用此函数）
3. 获取图片区域item-wrap的初始信息（位置！）

javascript">init() {
    // 遍历数据源增加扩展项, 以用作排序使用
    let list = this.data.listData.map((item, index) => {
        let data = {
            key: index,
            tranX: 0,
            tranY: 0,
            data: item
        }
        return data
    });

    this.setData({
        list: list,
        itemTransition: false
    });

    // 获取每一项的宽高等属性
    this.createSelectorQuery().select(".item").boundingClientRect((res) => {

        let rows;
        let len = this.data.list.length;
        if(len == MAX_IMG_NUM) {
            rows = Math.ceil(len / this.data.columns);
        }else {
            rows = Math.ceil((len + 1) / this.data.columns);
        }

        this.item = res;

        let itemWrapHeight = rows * res.height;

        this.getPosition(this.data.list, false);

        let obj = list[list.length - 1]
        let tranX = res.width * ((obj.key + 1) % this.data.columns);
        let tranY = Math.floor((obj.key + 1) / this.data.columns) * res.height;

        this.setData({
            itemWrapHeight,
            selSite: {
                tranX,
                tranY
            }
        })

        let query = wx.createSelectorQuery().in(this);
        query.select('.item-wrap').boundingClientRect((res) => {
            this.itemWrap = res;

        })
        // 需要的是“距离文档流顶部的距离”。所以咱们需要这片区域已经在页面上滚动了多少了，把这个值加上
        if(this.properties.scrollOffset) {
            this.itemWrap.top += this.properties.scrollOffset;
        }else {
            query.selectViewport().scrollOffset((res) => {
                let _wrap = this.itemWrap.top + res.scrollTop;
                this.itemWrap.top = _wrap;
            })
        }
        
        query.exec()
    }).exec();
},

这里尤其需要注意的是：获取图片区域信息时用的 API 只能获取“当前元素距离屏幕顶部的距离”。而实际大多数情况我们需要的是“当前元素距离文档流顶部的距离”。这两者在一个非常重要的场景下会有大幅偏差 —— 当文档流发生滚动时！
所以笔者采用selectViewport().scrollOffset API 来获得文档流的滚动偏差。并在后面长按甚至拖动过程中将这个偏差“抹去”。

如果你在使用笔者的组件库，并且遇到了“当前组件并不是一开始就在页面上出现而是动态展示”的场景，那么您也可以通过参数将这个“偏差”传入组件。这一点在README的使用说明中也有说明。

因为图片是 position 的，所以哪怕在初始时他们的位置也是计算得到的 —— getPosition 函数。我们根据列数获取每个元素的偏移距离，响应式到他们的transform上：

javascript">getPosition(data, vibrate = true) {
    let list = data.map((item, index) => {
        item.tranX = this.item.width * (item.key % this.data.columns);
        item.tranY = Math.floor(item.key / this.data.columns) * this.item.height;
        return item
    });

    this.setData({
        list: list
    });

    if (!vibrate) return;

    let listData = [];

    list.forEach((item) => {
        listData[item.key] = item.data
    });

    this.setData({
        listData,
        itemTransition: true
    })
},

接下来就是长按事件了。
在本组件中，少于两张图片则长按只有删除功能，一定程度上减少性能消耗。
长按时，我们需要拿到当前元素的位置，并且和整体区域位置结合获取“中心点”，并将中心点移动到点击位置处。这也就是我们说的“是否跟手”。并且这样图片的偏移也能提醒用户当前点的是这张图片：

javascript">longPress(e) {
    if(this.data.list.length < 2){
        this.setData({
            showMenuImg: true
        });
        wx.vibrateShort();
        return;
    }

    this.setData({
        touch: true
    });

    this.startX = e.changedTouches[0].pageX
    this.startY = e.changedTouches[0].pageY

    let index = e.currentTarget.dataset.index;

    this.tranX = this.startX - this.item.width / 2 - this.itemWrap.left;
    this.tranY = this.startY - this.item.height / 2 - this.itemWrap.top;

    this.setData({
        cur: index,
        curZ: index,
        tranX: this.tranX,
        tranY: this.tranY,
        showMenuImg: true
    });

    wx.vibrateShort();
},

长安之后是拖动。这是我们的核心事件。因为拖动排序，所以我们不仅需要计算当前元素的偏移，还需要计算元素偏移后和“路过元素”的位置关系 —— 临界点判断。

javascript">touchMove(e) {
    if (!this.data.touch) return;
    let tranX = e.touches[0].pageX - this.startX + this.tranX,
        tranY = e.touches[0].pageY - this.startY + this.tranY;

    this.setData({
        tranX: tranX,
        tranY: tranY,
        showMenuImg: false
    });

    let originKey = e.currentTarget.dataset.key;

    let endKey = this.calculateMoving(tranX, tranY);

    // 防止拖拽过程中发生乱序问题
    if (originKey == endKey || this.originKey == originKey) return;

    this.originKey = originKey;

    this.insert(originKey, endKey);
},

calculateMoving 函数就是做这个的：

javascript">calculateMoving(tranX, tranY) {
    let rows = Math.ceil(this.data.list.length / this.data.columns) - 1,
        i = Math.round(tranX / this.item.width),
        j = Math.round(tranY / this.item.height);

    i = i > (this.data.columns - 1) ? (this.data.columns - 1) : i;
    i = i < 0 ? 0 : i;

    j = j < 0 ? 0 : j;
    j = j > rows ? rows : j;

    let endKey = i + this.data.columns * j;

    endKey = endKey >= this.data.list.length ? this.data.list.length - 1 : endKey;

    return endKey
},

在拖动过程中，每次知道要偏移到哪，也就是抢占哪个元素的位置后，需要根据拖动元素的key 和 “目标元素”的 key 去重新计算每一项的新的key：

javascript">insert(origin, end) {
    let list;

    if (origin < end) {
        list = this.data.list.map((item) => {
            if (item.key > origin && item.key <= end) {
                item.key = item.key - 1;
            } else if (item.key == origin) {
                item.key = end;
            }
            return item
        });
        this.getPosition(list);

    } else if (origin > end) {
        list = this.data.list.map((item) => {
            if (item.key >= end && item.key < origin) {
                item.key = item.key + 1;
            } else if (item.key == origin) {
                item.key = end;
            }
            return item
        });
        this.getPosition(list);
    }
},

最后在“松手”时要去把所有在拖动过程中发生变化的变量给恢复初始值：

javascript">touchEnd() {
    if (!this.data.touch) {
        return;
    }else {
        this.setData({
            showMenuImg: true
        })
    }
    this.triggerMsg(this.data.listData, "sort-img")
    this.clearData();
},

javascript">clearData() {
    this.originKey = -1;

    this.setData({
        touch: false,
        cur: -1,
        tranX: 0,
        tranY: 0
    });

    // 延迟清空
    setTimeout(() => {
        this.setData({
            curZ: -1,
        })
    }, 300)
},

除此之外，还有删除事件。
删除也有两种方案：

1. 硬删除。删除指定元素后将数组重新初始化init
2. 有过渡效果的删除。从前到后计算删除元素位置，再从后到前将后一个元素的data赋值给前一个元素。但是其余key、tranX、tranY不变。最后len - 1

第二种方式相当于自己重新算了一遍。从一个地方可以看出两者的区别：需不需要自己计算“上传图片按钮的位置”！在笔者的组件中，也提供了参数可以选择使用哪种方式删除。
（如果放出代码的话整个篇幅就太多了，而且上面其实已经将代码的思路给说完了，“删除功能”的具体代码可以到github上看）