小程序实现区域数据滑动

小程序代码：

/*
moreX X轴移动距离
moreY Y轴移动的距离
*/
   <movable-area style="height: auto; width: 100%">
              <movable-view
              :x="moreX"
              :y="moreY"
              direction="all"
              :damping="5000"
              :friction="1"
            >
              <view class="item_move" hidden="true"></view>
            </movable-view>
   </movable-area>

业务逻辑代码

点击的初始位置代码如下：

/*
pointsArr  定义空数组
touchstarts  是Vue中的touchstart事件
*/
    touchstarts (event, index) {
      /*
      event.currentTarget 获取元素本身 
      event.currentTarget.dataset.index 如果event存在 event.currentTarget.dataset.index可以从中获取是数组的下标，否则不存在，可以自己传一个下个过来，判断是点击了那一项index
      */
      this.initialIndex= index
      // 距离左边的距离
      this.moreX = event.currentTarget.offsetLeft
      // 距离顶部的距离
      this.moreY = event.currentTarget.offsetTop
      let that = this;
      // 获取.item节点所有数据列表
      const query = wx.createSelectorQuery();
      const nodesRef = query.selectAll(".item");
      nodesRef.fields({
        dataset: true,
        rect: true
      }, (result) => {
        that.pointsList = result
      }).exec()
    },

fields 使用方法参考网址

移动的事件代码如下：

    touchm (evevt) {
      // 移动距离X轴的位置变化
      let x = evevt.touches[0].pageX
      // 移动距离Y轴的位置变化
      let y = evevt.touches[0].pageY
      let that = this;
      wx.createSelectorQuery().selectAll('.list').boundingClientRect(function (rect) {
        let top = rect[0].top;
        y = y - top;
        that.moreX = x
        that.moreY = y
      }).exec()
    },

boundingClientRect 使用方法参考网址

结束事件的代码如下：

    handleTouchEnd (evevt) {
    // changedTouches: 涉及当前(引发)事件的触摸点的列表
      let x = evevt.changedTouches[0].pageX;
      let y = evevt.changedTouches[0].pageY;
      const pointsList = this.pointsList
      // data是获取页面初始化显示的数据，或者请求接口返回来数组的数据
      let data = [...this.ManageGridList];
      pointsList.map((item,index)=>{
         if (x > item.left && x < item.right && y > item.top && y < item.bottom) {
          //临时保存移动的目标数据
          let temp = data[this.initialIndex];
          if (data[index] !== undefined) {
            //将移动目标的下标值替换为被移动目标的下标值
            data[beginIndex] = data[index];
            //将被移动目标的下标值替换为beginIndex
            data[index] = temp;
          }
        }
      })  
       console.log(data);
      }

效果图：

浏览效果可以搜索小程序：酷健身后台