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>
export default {
    name: 'FloatingButton',
    data() {
        return {
            top: 430,
            left: 20,
            startX: 0,
            startY: 0,
            dragging: false
        };
    },
    methods: {
        onTouchStart(event) {
            this.startX = event.touches[0].clientX;
            this.startY = event.touches[0].clientY;
            this.dragging = true;
        },
        onTouchMove(event) {
            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: 10px;
    border-radius: 50%;
    width: 70rpx;
    height: 70rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
</style>