uniapp自定义按钮/文字页面任意位置拖动（movable-area）

自定义标签当前页面随意拖动（不遮挡页面的点击事件）

直接上代码：

1.页面结构：

<template>
    <movable-area class="movable-area">
        <movable-view class="movable-view" :x="x" :y="y" direction="all">
            <text>去安排</text>
        </movable-view>
    </movable-area>
</template>

2.data变量：

	export default {
        data() {
			return {
				x: 320,
				y: 520,
			}
		},
    }

3.css样式：

  .movable-area {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	
		.movable-view {
			pointer-events: auto;
			@include flex;
			align-items: center;
			justify-content: center;
			background: $theme-color;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			color: #fff;
			font-size: 14px;
		}
	}

当前页面随意拖住不影响页面的任何位置的事件触发！ movable-area的初始位置请改变data中的X和Y的初始值。 拿去随便用 好用点赞支持支持~