Preface

First look at the effect.

Drag is implemented, but the click event of the lower layer of the draggable area is invalid. The original drag is to solve the problem that the lower layer is blocked and can't be clicked
That's great. The area that can't be clicked is higher. Fortunately, I found a solution from the Internet

movable-view {
    pointer-events: auto; 
}

movable-area {
    pointer-events: none;
}

Vertical drag for floating icon

Wechat applet comes with movable area and movable view
Area is the mobile height. Here, the screen height of the mobile device is obtained minus the upper and lower blank, and the iPhone x is adapted
Reset is to return icons to their original positions
Blue area below

Because the public component, movable view height, was passed in through properties, which was originally intended to be obtained through the boundingClientRect method of the applet, but because the rendering speed was slow, the height might be 0, so it was passed in as it is

<movable-area style="height:{{areaH}}px;"  class="ex-class {{iphoneX?'x-class':''}}">
  <movable-view x="{{x}}" y="{{y}}"  style="height:{{height}}px;" direction="vertical">
    <view class="btns-bg " id="icons-container">
      <slot name="icons"></slot>
    </view>
  </movable-view>
</movable-area>

// components/s-icon-btns/index.js
const App = getApp()
Component({
  /**
   * Property list of component
   */
  externalClasses: ['ex-class'],
  options: {
    multipleSlots: true
  },
  properties: {
    // Vessel height
    height: {
      type: Number,
      value: 0,
      observer(newVal, oldVal) {
        // Set y initial position
        this.setData({
          y: this.data.areaH - newVal
        })
      }
    },
    resetY: {
      // And! wiggle
      type: Boolean,
      value: false,
      observer(newVal, oldVal) {
        this.setData({
          y: this.data.areaH - this.data.height
        })
      }
    }
  },
  /**
   * Initial data of components
   */

  data: {
    iphoneX: App.globalData.isIphoneX,
    x: 10,
    areaH: App.globalData.isIphoneX
      ? App.globalData.mobile.windowHeight - 240
      : App.globalData.mobile.windowHeight - 180 //Movable area
  },

  /**
   * Method list for component
   */
  methods: {}
})

.btns-bg {
    // position: fixed;
    // right: 10px;
    // bottom: 110px;
    // z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    width: 45px;
    min-height: 45px;
    border-radius: 45px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    box-shadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, 0.07);
    &.lower {
        bottom: 61px;
    }
}

.x-class {
    margin-bottom: 68rpx;
}

movable-view {
    pointer-events: auto;
    width: 45px;
    padding: 10px;
    box-sizing: content-box;
}

movable-area {
    pointer-events: none;
    position: fixed;
    right: 0px;
    bottom: 70px;
    z-index: 1000;
    width: 65px;
    overflow: hidden;
}

summary

In addition to the bug s we met, others are very simple and convenient
If there is any problem
Welcome to leave a message or add wechat discussion