微信小程序图片拖拽调整

主要代码段：

.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();
  },