mechanicStore-app/components/u-floating/u-floating.vue

<template>
	<view class="floating-button" :style="{ top: top + 'px', left: left + 'px' }" @touchstart="onTouchStart"
		@touchmove="onTouchMove" @touchend="onTouchEnd">
		<text class="textIcon icon-jingwuicon_svg-" style="font-size: 60rpx;color: #FF4D4D;"></text>
	</view>
</template>

<script lang="uts">
	type TouchItem = {
		clientX : number
		clientY : number
	}
	type TouchEvent = {
		touches : Array<TouchItem>
	}
	export default {
		name: 'FloatingButton',
		data() {
			return {
				top: 430,
				left: 20,
				startX: 0,
				startY: 0,
				dragging: false
			};
		},
		methods: {
			onTouchStart(event : TouchEvent) {
				this.startX = event.touches[0].clientX
				this.startY = event.touches[0].clientY
				this.dragging = true
			},
			onTouchMove(event : TouchEvent) {
				if (this.dragging) {
					const deltaX = event.touches[0].clientX - this.startX
					const deltaY = event.touches[0].clientY - this.startY
					this.startX = event.touches[0].clientX
					this.startY = event.touches[0].clientY
					this.top += deltaY
					this.left += deltaX
				}
			},
			onTouchEnd() {
				this.dragging = false
			}
		}
	}
</script>

<style scoped>
	.floating-button {
		position: fixed;
		z-index: 9999;
		background-color: #fff;
		padding: 20rpx; /* converted from 10px */
		/* use explicit half of width to create perfect circle in rpx */
		border-radius: 35rpx;
		width: 70rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
	}
</style>