微信小程序实现拖拽容器Y轴改变，X轴不变

1. wxml使用movable-area、movable-view组件

<movable-area class="movablearea" style="height: {{movableareHeight}}px; top: {{movableareTop}}px;">
    <movable-view x="{{x}}" y="{{y}}" direction="all" bindtap="goCart" bindtouchend="bindtouchend" bindchange="movablechange" bindtouchstart="bindtouchstart">
    </movable-view>
</movable-area>

2. 动态计算movableareHeight、movableareTop来设置拖拽区域宽高，拖拽区域movable-area 必须设置width和height属性，不设置默认为10px；movable-view设置初始位置 x,y  表示x轴距离和y轴距离，direction设置可移动方向 all为所有方向；

3. js设置拖拽逻辑

    movablechange(e){
        // 拖拽过程中设置Y轴值
      if(!this.data.isStop){
        this.setData({
          y: e.detail.y
        })
      }
    },
    bindtouchstart(){
        // 设置拖拽状态
      this.data.isStop = false
    },
    bindtouchend(){
    // 拖拽结束设置x轴值回到原来位置
      this.data.isStop = true
      this.setData({
         x: this.data.x,
      })
    },

4. 设置wxss样式

.movablearea{
  width: 100vw;
  pointer-events: none;
  position: fixed;
  left: 0;
  z-index: 99;
}
movable-view {
  pointer-events: auto;
  width: 92rpx;
  height: 92rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(79,0,0,0.2);
  border-radius: 20rpx;
}

其中给movable-area设置pointer-events: none；给movable-view设置pointer-events: auto;可实现事件穿透，保证拖拽区域下面的事件可以触发；

以上就是微信小程序实现拖拽容器Y轴改变，X轴不变的方法，我们拖拽容器到任意位置，松手后y轴不变，x轴回到原来的位置，即拖拽行为结束，横向位置不变。