代码

<template><view class="index"><view @click="toast">页面内容事件触发</view><movable-area class="movableArea"><movable-view :x="x" :y="y" direction="all" change="movableView"><image src="../../static/3.gif" mode="" class="gif-img" @click="changeGif"></image></movable-view></movable-area></view>
</template><script>export default {data() {return {x:0,y:0}},onShow(){uni.getSystemInfo({success:  (res)=> {this.x = res.windowWidth/1.3this.y = res.windowHeight-200}});},methods:{toast(){console.log('不会因为层级问题，遮挡页面内容');},changeGif(){console.log('点击了拖拽区域');},}}
</script><style scoped lang="scss">.index{movable-area{position: fixed;left: 0;top: 0;z-index: 2;height: calc(100% - var(--window-bottom));width: 100%;background-color: transparent;overflow: hidden;pointer-events: none;}movable-view{display: flex;align-items: center;justify-content: center;height: 150rpx;width: 150rpx;pointer-events: auto;}.gif-img{height: 150rpx;width: 150rpx;}}
</style>

movable-view可移动的视图容器，完美解决层级问题，这两个属性一定要有。

movable-area：pointer-events: none;
movable-view：pointer-events: auto;