菜鸟版，微信小程序----movable-area，movable-view实现模块拖动内容替换

代码如下：

imageSelect.wxml

<movable-area style="width:{{area_w}}px;height:{{area_h}}px;" >
  <movable-view bindtouchstart='dragStart' 
                bindtouchmove='dragMove'
                bindtouchend='dragEnd' 
                direction="all"
                damping="50" 
                out-of-bounds 
                wx:for="{{list}}" 
                data-ind="{{index}}" 
                x="{{item.x}}" 
                y="{{item.y}}" 
                >

    <view style="width:{{view_w}}px;height:{{view_h}}px;" class="img_v">{{item.name}}</view>
  </movable-view>
</movable-area>

imageSelect.wxss

.img_v{
  border: 1rpx solid;
}

imageSelect.js

// template/imageSelect/imageSelect.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  //组件的初始数据
  data: {
    list: [],
    movinfo:{
      index:0,
      intX:0,
      intY:0,
      endX:0,
      endY:0
    }
  },

  //组件的方法列表
  methods: {
    dragStart: function (e) {
      var than = this;
      console.log('开始 x:' + e.changedTouches[0].clientX + ' y:' + e.changedTouches[0].clientY);
      var movinfo = than.data.movinfo;
      if (e.currentTarget.dataset.ind==0||movinfo.index != e.currentTarget.dataset.ind){
        movinfo.index = e.currentTarget.dataset.ind;
        movinfo.intX = e.touches[0].clientX;
        movinfo.intY = e.touches[0].clientY;
        movinfo.endX = 0;
        movinfo.endY = 0;
        than.setData({
          movinfo: movinfo
        })
      }
    },

    dragMove: function (e) {
      
    },
    
    dragEnd: function (e) {
      console.log('结束 x:' + e.changedTouches[0].clientX + ' y:' + e.changedTouches[0].clientY);
      var than = this;
      var movinfo = than.data.movinfo;
      var list = than.data.list;
      var x = movinfo.intX - e.changedTouches[0].clientX-1;
      var y = movinfo.intY - e.changedTouches[0].clientY;
      x = list[movinfo.index].x - x;
      y = list[movinfo.index].y - y;
      console.log('结束坐标：x:'+x+' y:'+y);
      list.forEach((o,index)=>{
        var w = o.w;
        var x1 = x;
        var y1 = y;
        var x2 = x + w;
        var y2 = y + w;

        var ox1 = o.x - w*0.4;
        var oy1 = o.y - w * 0.4;
        var ox2 = o.x + w * 1.4;
        var oy2 = o.y + w * 1.4;
        if(
          ox1 <= x1 && 
          ox2 >= x2 && 
          oy1 <= y1 && 
          oy2 >= y2 
        ){
          
          console.log('结束坐标位于' + index + '模块内');
          var name = list[movinfo.index].name;
          var name1 = list[index].name;

          list[index].name = name;
          
          list[movinfo.index].name = name1;
        }else{
          than.fyuan();
        }
      });
      than.setData({
        list: list,
        movinfo: {
          index: 0,
          intX: 0,
          intY: 0,
          endX: 0,
          endY: 0
        }
      })
      
    },
    
    fyuan:function(){
      var than = this;
      than.data.list.forEach((o, index)=>{
        o.x = o.x;
        o.y = o.y;
      });
      than.setData({
        list:than.data.list,
        movinfo: {
          index: 0,
          intX: 0,
          intY: 0,
          endX: 0,
          endY: 0
        }
      })
    }
  },

  //组件生命周期函数-在组件实例进入页面节点树时执行
  attached: function () {
    var systeminfo = wx.getSystemInfoSync();
    // systeminfo.windowWidth = systeminfo.windowWidth/2;
    console.log(systeminfo);
    var list = [
      { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 },
      { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 },
      { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }
    ];
    var w = (systeminfo.windowWidth / 3);
    list.forEach((o, index) => {
      if (index % 3 == 0) {
        o.x = 0;
        o.y = Number(index / 3) * w;
      } else if (index % 3 == 1) {
        o.x = w;
        o.y = Number((index - 1) / 3) * w;
      } else if (index % 3 == 2) {
        o.x = Number(index % 3) * w;
        o.y = Number((index - 2) / 3) * w;
      }
      o.name = index+'la';
      o.w = w;
      o.h = w
      // console.log(o)
    });
    this.setData({
      list: list,
      area_w: Number(systeminfo.windowWidth)  ,
      area_h: Number(systeminfo.windowWidth) ,
      view_w: w,
      view_h: w,
    });



  },

})