【无标题】小程序上传图片拖拽排序

效果：

hamburger 2022-10-10

wxml：在这里插入代码片

          <!-- 图片 -->
          <block wx:if="{{formData.type===2}}">
            <block wx:for="{{mediaList}}" wx:key="index">
              <view class="box-item" id="{{item.index}}" catchtap='pic_preview' data-index='{{index}}' bindlongpress='_longtap' bindtouchstart='touchs' bindtouchend='touchend' catchtouchmove='touchm'>
                <van-image custom-class="box-item-img" fit="cover" radius="16rpx" src="{{item.tempFilePath}}" />
                <view class="box-item-close" data-index="{{index}}" catchtap="closeMedia">
                  <image class="box-item-close-icon" src="{{IMGURL}}/image/wxmp/discover/dynamic-ic-delete.png" mode="aspectFill" />
                </view>
              </view>
            </block>
          </block>
          <movable-view class="movableView" animation='{{false}}' out-of-bounds="{{false}}" x="{{x}}" y="{{y}}" direction="all" damping="{{5000}}" friction="{{1}}" disabled="{{disabled}}">
            <view class='box-item-move' style="opacity: 0.5; position: absolute; transform: translateX ({{x}}) translateY ({{y}}); "  hidden='{{hidden}}'>
              <image style="width: 100%; height: 100%" src="{{doubleImg}}" />
              <!-- <van-image custom-class="box-item-img" fit="cover" radius="16rpx" src="{{doubleImg}}" /> -->
            </view>
          </movable-view>
          <!-- 加号 -->
          <block wx:if="{{formData.type===2 && mediaList.length<9}}">
            <view class="box-add" bind:tap="getMedia">
              <image class="box-add-icon" src="{{IMGURL}}/image/wxmp/discover/dynamic-ic-add.png" mode="widthFix" />
            </view>
          </block>
        </movable-area>html
在这里插入代码片

css：

  display: flex;
  flex-wrap: wrap;
  width: 690rpx;
  height: 100%;
}

.movableView {
  display: inline-block;
  // width: 210rpx;
  // height: 210rpx;
  pointer-events: auto;//可以点击
}

.box-item-move {
  display: inline-block;
  width: 210rpx;
  height: 210rpx;
  border: 1px solid blue;
}
在这里插入代码片

js：在这里插入代码片
再上传文件之后，调用getNodes函数即可。

data: {
	mediaList: [], // 文件数组
	x: 10,
    y: 10,
    hidden: true,
    disabled: true,
    flag: false,
    elements: [],
    doubleImg: '',
},
// 获取页面图片节点
  getNodes() {
    const query = wx.createSelectorQuery();
    console.log('获取界面上的节点信息', query);
    const nodesRef = query.selectAll('.box-item');
    console.log('nodesRef', nodesRef);
    nodesRef.fields({
      dataset: true,
      rect: true,
    }, (result) => {
      console.log('result', result);
      this.setData({
        elements: result,
      });
    }).exec();
  },
// 长按
  _longtap(e) {
    const { detail } = e;
    if (this.data.mediaList.length > 1) {
      this.setData({
        x: e.currentTarget.offsetLeft + 10,
        y: e.currentTarget.offsetTop + 10,
      });
      this.setData({
        hidden: false,
        flag: true,
        doubleImg: this.data.mediaList[e.currentTarget.dataset.index].tempFilePath,
      });
    }
  },
  // 触摸开始
  touchs(e) {
    // console.log('触摸开始', e);
    this.setData({
      beginIndex: e.currentTarget.dataset.index,
    });
  },
  // 触摸结束
  touchend(e) {
    // console.log('触摸结束', e);
    if (!this.data.flag) {
      return;
    }
    const x = e.changedTouches[0].pageX;
    const y = e.changedTouches[0].pageY;
    const list = this.data.elements;
    const { mediaList } = this.data;
    for (let j = 0; j < list.length; j++) {
      const item = list[j];
      if (x > item.left && x < item.right && y > item.top && y < item.bottom) {
        const endIndex = item.dataset.index;
        const { beginIndex } = this.data;
        // 向后移动
        if (beginIndex < endIndex) {          
        const tem = mediaList[beginIndex];
          for (let i = beginIndex; i < endIndex; i++) {
            mediaList[i] = mediaList[i + 1];
          }
          mediaList[endIndex] = tem;
        }
        // 向前移动
        if (beginIndex > endIndex) {       
           const tem = mediaList[beginIndex];
          for (let i = beginIndex; i > endIndex; i--) {
            mediaList[i] = mediaList[i - 1];
          }
          mediaList[endIndex] = tem;
        }        this.setData({
          mediaList,
        });
      }
    }
    this.setData({
      hidden: true,
      flag: false,
    });
  },
  // 滑动
  touchm(e) {
    // console.log('滑动', e);
    if (this.data.flag) {
      const x = e.touches[0].pageX;
      const y = e.touches[0].pageY;
      console.log(x, y);
      this.setData({
        x,
        y,
      });
    }
  },
  // 预览
  pic_preview(e) {
    // console.log('预览', e);
    const { index } = e.currentTarget.dataset;
    const bannerList = this.data.mediaList;
    console.log('bannerList', bannerList);
    const bannerArr = bannerList.map((item) => {
      if (item.fileType == 'image') {
        return {
          url: item.tempFilePath,
          type: 'image',
        };
      }
      
      if (item.fileType == 'video') {
        return {
          url: item.tempFilePath,
          type: 'video',
        };
      }
      return item;
    });
    if (wx.canIUse('previewMedia')) {
      wx.previewMedia({
        sources: bannerArr,
        current: index,
      });
    } else {
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。',
      });
    }
  },

这里只贴出来主要思路，仅供参考。

The End: https://blog.csdn.net/haicome/article/details/82664344 我是参考这篇文章