小程序实现图片上传和拖拽

html代码如下：

<movable-area style="height:100vh;width: 100%;">
<view class="list">
<view class="item" wx:for="{{imgList}}" wx:for-item="item"
wx:key="{{item.id}}"
data-index="{{index}}"
data-item="{{item}}"
bindtouchstart="touchstart"
bindtouchmove="touchmove"
bindtouchend="touchend"
>
<image src="{{item}}" class="img"></image>
</view>
<view class='item itemImg' bindtap='upload' wx:if="{{showImg}}">+</view>
</view>
<movable-view x="{{moreX}}" y="{{moreY}}" hidden="{{hidden}}"
direction="all"
damping="5000"
friction="1"
>
<image src="{{moreImg}}" class="img"></image>
</movable-view>
</movable-area>

样式代码如下：

.list{
  display: flex;
  flex-wrap: wrap;
  width: 95%;
  margin: 10px auto;
}
.item{
  border-radius: 5px;
  border: 1px solid #000;
  width: 80px;
  height: 80px;
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
}
.img{
  width: 80px;
  height: 80px;
  border-radius: 5px;
}

.itemImg{
  text-align: center;
  line-height: 70px;
  font-size: 60px;
}

业务逻辑如下：

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    moreX:0, // 移动X轴变化
    moreY:0, // 移动Y轴变化
    moreImg:'',// 移动显示的图片路径
    hidden:true,// 是否显示movable-view
    domeList:[], // 获取节点List数据的数据
    imgList:[],// 图片路径的存储
    initialIndex:0,// 默认初始值是0
    showImg:true, 是否显示上传图片
    uploaderNum:0 //上传多少张图片的数量
  },
 // 初始化位置
  touchstart(event){
    const {offsetTop,offsetLeft,dataset} =event.currentTarget
    this.setData({
      hidden:false,
      moreX:offsetLeft,
      moreY:offsetTop,
      moreImg:dataset.item,
      initialIndex:dataset.index
    })
    // this.hidden=false
    const nodesRef =wx.createSelectorQuery().selectAll('.item')
    const _this=this
    nodesRef.fields({
      dataset:true,
      rect:true
    },(resList)=>{
      _this.setData({
        domeList:resList
      })
    }).exec()
  },
  // 移动执行的事件
  touchmove(event){
    const {pageX,pageY} =event.touches[0]
    this.moreX=pageX
    wx.createSelectorQuery().selectAll('.list').boundingClientRect((rect)=>{
      let top = rect[0].top
      // y=pageY-top
      this.setData({
        hidden:false,
        moreX:pageX,
        moreY:pageY-top
      })
    }).exec()
  },
  // 结束的事件
  touchend(event){
    const {pageX,pageY}=event.changedTouches[0]
    const data=[...this.data.imgList]
    this.data.domeList.map((item,index)=>{
      if(pageX > item.left && pageX < item.right && pageY> item.top && pageY< item.bottom){
        if(data[index]!==undefined){
          let temp = data[this.data.initialIndex];
          data[this.data.initialIndex]=data[index]
          data[index]=temp
        }
      }
    })
    this.setData({
      imgList:data,
      hidden:true
    })
  },
// 点击上传图片的事件
  upload(e) {
    const that = this;
    wx.chooseImage({
        count: 9-that.data.uploaderNum , // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
            console.log(res)
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            let tempFilePaths = res.tempFilePaths;
            let uploaderList = that.data.imgList.concat(tempFilePaths);
            if (uploaderList.length==9){
                that.setData({
                  showImg:false
                })
            }
            that.setData({
              imgList: uploaderList,
              uploaderNum:uploaderList.length
            })
        }
    })
},
})

业务逻辑详细参考