小程序图片拖拽排序

废话不多说，直接上菜

wxml

<view style="padding: 35rpx;">
    <view class='item_container'>
    <view 
      wx:for='{{bannerimgs}}' 
      wx:key="item"
      class="item {{index==current?'moving':'normal'}}"  
      style="left:{{index==current?move_x:item.left}}px;top:{{index==current?move_y:item.top}}px; background: url('{{item.url}}') no-repeat 0 0;background-size: 100%;" 
      bindtouchmove="move" 
      bindtouchstart="movestart" 
      bindtouchend="moveend"
      data-index="{{index}}">
      <view class="del" catchtap="childBtn" data-type="bannerimgs" data-index="{{ index }}">X</view>
    </view>
   </view> 
</view>

js

var app = getApp();
var x, y, x1, y1, x2, y2;
var text = 1234;
Page({
  data: {
    bannerimgs: [
      {url:"https://testshop.jianuohuiyuan.com/attachment/images/19/2022/06/rkDiSqVbsXK0000D0S0tQqsMMIsX7i.jpg"},
      {url:"https://testshop.jianuohuiyuan.com/attachment/images/19/2022/05/GvPn2V8w322P8n82vF2PlF2zP0wW9v.png"},
      {url:"https://testshop.jianuohuiyuan.com/attachment/images/19/2022/05/uxTrCXHxXhYXXuBuggSRPst0PT4nbp.png"},
      {url:"https://testshop.jianuohuiyuan.com/attachment/images/19/2022/05/yI88Jpgr0Np8uKa0JhHKj0j34hunk0.png"},
      {url:"https://testshop.jianuohuiyuan.com/attachment/images/19/2022/05/fwzw7JZ9z6WwdSc96s7NNPPz6JU777.png"},

      {url:"https://testshop.jianuohuiyuan.com/attachment/images/19/2022/06/rkDiSqVbsXK0000D0S0tQqsMMIsX7i.jpg"},
      {url:"https://testshop.jianuohuiyuan.com/attachment/images/19/2022/05/GvPn2V8w322P8n82vF2PlF2zP0wW9v.png"},
      {url:"https://testshop.jianuohuiyuan.com/attachment/images/19/2022/05/uxTrCXHxXhYXXuBuggSRPst0PT4nbp.png"},
      {url:"https://testshop.jianuohuiyuan.com/attachment/images/19/2022/05/yI88Jpgr0Np8uKa0JhHKj0j34hunk0.png"},
      {url:"https://testshop.jianuohuiyuan.com/attachment/images/19/2022/05/fwzw7JZ9z6WwdSc96s7NNPPz6JU777.png"},
    ],
    current: -1,
    s_v: 10,
    s_h: 10,
    u_w: 57,
    u_h: 50,
    all_width: '',//总的宽度
    move_x: '', move_y: '',
  },
  onLoad: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        var width = that.data.all_width = res.windowWidth, _w = 0, row = 0, column = 0;
        var arr = [].concat(that.data.bannerimgs)
        arr.forEach(function (n, i) {
          n.left = (that.data.u_w + that.data.s_h) * row + that.data.s_h;
          n.top = (that.data.u_h + that.data.s_v) * column + that.data.s_v;
          n._left = n.left;
          n._top = n.top;
          _w += that.data.u_w + that.data.s_h;
          if (_w + that.data.u_w + that.data.s_h > width) {
            _w = 0;
            row = 0;
            column++;
          } else {
            row++;
          }

        });
        that.setData({
          bannerimgs: arr
        })
      }
    });
  },
  movestart: function (e) {
    x = e.touches[0].clientX;
    y = e.touches[0].clientY;
    x1 = e.currentTarget.offsetLeft;
    y1 = e.currentTarget.offsetTop;
    this.setData({
      current: e.target.dataset.index,
      move_x: x1,
      move_y: y1
    });
  },
  move: function (e) {
    var that = this;
    x2 = e.touches[0].clientX - x + x1;
    y2 = e.touches[0].clientY - y + y1;
    var underIndex = this.getCurrnetUnderIndex();

    if (underIndex != null && underIndex != this.data.current) {
      var arr = [].concat(this.data.bannerimgs);
      this.changeArrayData(arr, underIndex, this.data.current);
      this.setData({
        bannerimgs: arr,
        current: underIndex
      })
    }

    this.setData({
      move_x: x2,
      move_y: y2
    });
  },
  moveend: function (e) {
    this.setData({
      current: -1,
    })
  },
  changeArrayData: function (arr, i1, i2) {
    var temp = arr[i1];
    arr[i1] = arr[i2];
    arr[i2] = temp;

    var _left = arr[i1]._left, _top = arr[i1]._top;
    arr[i1]._left = arr[i2]._left;
    arr[i1]._top = arr[i2]._top;
    arr[i2]._left = _left;
    arr[i2]._top = _top;

    var left = arr[i1].left, top = arr[i1].top;
    arr[i1].left = arr[i2].left;
    arr[i1].top = arr[i2].top;
    arr[i2].left = left;
    arr[i2].top = top;

  },
  getCurrnetUnderIndex: function (endx, endy) {//获取当前移动下方index
    var endx = x2 + this.data.u_w / 2,
      endy = y2 + this.data.u_h / 2;
    var v_judge = false, h_judge = false, column_num = (this.data.all_width - this.data.s_h) / (this.data.s_h + this.data.u_w) >> 0;
    var _column = (endy - this.data.s_v) / (this.data.u_h + this.data.s_v) >> 0;
    var min_top = this.data.s_v + (_column) * (this.data.u_h + this.data.s_v),
      max_top = min_top + this.data.u_h;
    if (endy > min_top && endy < max_top) {
      v_judge = true;
    }
    var _row = (endx - this.data.s_h) / (this.data.u_w + this.data.s_h) >> 0;
    var min_left = this.data.s_h + (_row) * (this.data.u_w + this.data.s_h),
      max_left = min_left + this.data.u_w;
    if (endx > min_left && endx < max_left) {
      h_judge = true;
    }
    if (v_judge && h_judge) {
      var index = _column * column_num + _row;
      if (index > this.data.bannerimgs.length - 1) {//超过了
        return null;
      } else {
        return index;
      }
    } else {
      return null;
    }
  },


})

wxss

.tip{
  color:#aaa;
  font-size:12px;
}
.normal_title{
  font-size:16px;
  margin:10rpx 20rpx;
  font-weight: bold;
}
.item{
  width: 100rpx;
  height: 100rpx;
  position:absolute;
  border:1px solid black;
  
}
.item_container{
  height: 270rpx;
  border:1px solid black;
  position:relative;
}