可拖拽悬浮窗，控制无法超出屏幕大小

<template>
	<view class="holdon">
		<image class="ball" :style="'left:'+(moveX == 0 & x>=0? maxWidth-100:moveX)+'px;top:'+(moveY == 0 & y>=0? maxHeight-200:moveY)+'px'"
			@touchstart="drag_start" @touchmove.prevent.stop="drag_hmove" src="@/static/home/window.png" mode="aspectFill" @tap="tapWindow">
		</image>
	</view>
</template>

<script>
	export default {
		props: {
			x: {
				type: Number,
				default: 0
			},
			y: {
				type: Number,
				default: 0
			},
			image: {
				type: String,
				default: ''
			}
		},

		data() {
			return {
				start: [0, 0],
				moveX:0,
				moveY:0,
				maxWidth: 0,
				maxHeight: 0
			}
		},
		created() {
			// 计算屏幕剩余高度  填补剩余高度
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					_this.maxWidth = res.windowWidth;
					_this.maxHeight = res.windowHeight;
					// 计算组件的高度

				}
			});
		},
		methods: {
			tapWindow(){
				this.$emit("activitiesTo")
			},
			drag_start(event) {
				this.start[0] = event.touches[0].clientX - event.target.offsetLeft;
				this.start[1] = event.touches[0].clientY - event.target.offsetTop;
			},
			drag_hmove(event) {
				let tag = event.touches;

				this.moveX = Math.max(0, Math.min(tag[0].clientX, this.maxWidth)) - this.start[0];
				this.moveY = Math.max(0, Math.min(tag[0].clientY, this.maxHeight)) - this.start[1];
			}
		}
	}
</script>

<style lang="less">
	.holdon {
		width: 100%;
		height: 100%;
	}

	.ball {
		width: 120rpx;
		height: 120rpx;
		// background: linear-gradient(to bottom, #F8F8FF, #87CEFA);
		border-radius: 60%;
		// box-shadow: 0 0 15upx #87CEFA;
		color: #fff;
		font-size: 30upx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed !important;
		z-index: 1000000;
	}
</style>