uniapp：拖拽容器movable-view，层级问题解决

代码

<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.3
					this.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;