主要代码段：

.wxml文件

<view class="uploadBox">
   <!-- 克隆 item -->
   <view id="{
  {kelong.id}}"  class="imgList kelong"  hidden='{
  {!showkelong}}' style='top:{
  {kelong.top}}px;left:{
  {kelong.left}}px'>
       <image src="{
  {kelong.nameIcon}}"></image>
   </view>
   <view class="imgList" wx:for="{
  {imgList}}" data-index="{
  {index}}" wx:key='index' bind:touchstart='dragStart' catch:touchmove='dragMove' bind:touchend='dragEnd'>
      <text class="close" catchtap="delImg" data-idx="{
  {index}}">×</text>
      <image src="{
  {item}}"></image>
      <view class="zt" wx:if="{
  {index===0}}">
        <image src="/static/icons/icon/img.png"></image>主图
      </view>
   </view>
   <view class="uploadBtn" wx:if="{
  {imgList.length<6}}" bindtap="chooseImg">
      <image src="/static/icons/icon/canmera.png"></image>
      <text>添加主图等</text>
   </view>
</view>

.wxss文件

.uploadBox{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 34rpx;
}
.imgList{
  width: 150rpx;
	height: 150rpx;
  position: relative;
  margin-left: 20rpx;
  margin-bottom: 20rpx;
}
.kelong{
  width: 150rpx;
  position: absolute;
  z-index: 10;
}

.js文件

dragStart: function (e) {
    var that = this
    var kelong = that.data.kelong
    var i = e.currentTarget.dataset.index
    var query = wx.createSelectorQuery();
    //选择id
    query.select('.uploadBox').boundingClientRect(function (rect) {
      kelong.top = e.changedTouches[0].clientY - rect.top
      kelong.left = e.changedTouches[0].clientX - rect.left
      kelong.nameIcon=that.data.imgList[i]
      // console.log("dragStart", kelong.top,kelong.left)
      that.setData({
        kelong: kelong,
        showkelong: true
      })
    }).exec();
  },
  dragMove: function (e) {
    var that = this
    // var i = e.currentTarget.dataset.index
    var query = wx.createSelectorQuery();
    var kelong = that.data.kelong
    // var listnum = that.data.list.length
    // var list = that.data.list
    query.select('.uploadBox').boundingClientRect(function (rect) {
      kelong.top = e.changedTouches[0].clientY - rect.top
      kelong.left = e.changedTouches[0].clientX - rect.left
      // console.log("dragMove",kelong.left,rect.width)
      if (kelong.top < 77) {
        kelong.top = 77
      } else if (kelong.top > rect.height) {
        // console.log("dragMove",kelong.top)
        kelong.top = rect.height
      }
      if (kelong.left < 16) {
        kelong.left = 16
      } else if (kelong.left > (rect.width-85)) {
        // console.log("dragMove",kelong.top)
        kelong.left = rect.width-85
      }
      that.setData({
        kelong: kelong,
      })
    }).exec();
  },
  dragEnd: function (e) {
    var that = this
    var i = e.currentTarget.dataset.index
    var query = wx.createSelectorQuery();
    var kelong = that.data.kelong
    // var listnum = that.data.list.length
    var list = that.data.imgList
    query.select('.uploadBox').boundingClientRect(function (rect) {
      kelong.top = e.changedTouches[0].clientY - rect.top
      kelong.left = (e.changedTouches[0].clientX - rect.left)>300?290:e.changedTouches[0].clientX - rect.left
      // console.log("dragEnd", kelong.left,kelong.top)
      var targetY = parseInt(kelong.top / 75)
      var targetX = parseInt(kelong.left / 75)
      var replace = that.data.replace
      // console.log(targetY,targetX);
      if (targetY >= 0) {
        // 互换位置
        // replace.name = list[target].name
        // list[target].name = list[i].name
        // list[i].name = replace.name

        // 位置下沿
        replace = list.splice(i, 1);
        if(replace.length>0){
          list.splice(targetX, 0, replace[0]);
        }
      }
      that.setData({
        imgList: list,
        showkelong: false
      })
    }).exec();
  },