h5用js寫，微信小程序用

代碼里面沒有完全實現吸附邊緣的功能，需要吸附邊緣的話還得自己再完善下（h5的吸附邊緣是可以的，小程序的還有點問題）

主要功能是：圖片上寫文字的懸浮按鈕，文字使用的是::after實現的，圖片就用的u-image標簽

（圖片和文字，用背景圖好像更方便誒，文字就用絕對定位、flex或者是margin）

		<template><!-- #ifndef MP-WEIXIN --><view class="btn" :style="{ left: left + 'px', top: top + 'px' }" @touchstart="handleTouchStart"@touchmove.prevent="handleTouchMove" @touchend="handleTouchEnd" @click="clickHandle"><u--image src="放自己的圖" width="144rpx"height="128rpx" class="link"></u--image></view><!-- #endif --><!-- #ifdef MP-WEIXIN --><movable-area class="drag-area" style="height:100vh"><movable-view direction="all" :x="x" :y="y" :damping="40" @touchend="handleTouchEnd" class="btn"@click="clickHandle" :animation="false"><u--image src="放自己的圖"width="144rpx" height="128rpx"></u--image></movable-view></movable-area><!-- #endif --></template>left: 0,     // 按鈕左側位置top: 0,      // 按鈕頂部位置startX: 0,   // 觸摸起始X坐標startY: 0,screenWidth: 0,  // 屏幕寬度screenHeight: 0, // 屏幕高度x: 0,           // X軸位置y: 500,           // Y軸位置systemInfo: {},  // 系統信息btnWidth: 72,    // 按鈕寬度（px）btnHeight: 64,   // 按鈕高度（px）mounted() {const systemInfo = uni.getSystemInfoSync();this.screenWidth = systemInfo.windowWidth;this.screenHeight = systemInfo.windowHeight;this.left = this.screenWidth - this.btnWidth - 10;this.top = 500;this.x = this.screenWidth - this.btnWidth - 10;this.y = 500;},handleTouchStart(e) {// 記錄觸摸起點this.startX = e.touches[0].clientX;this.startY = e.touches[0].clientY;},handleTouchMove(e) {if (e.cancelable) e.preventDefault();const deltaX = e.touches[0].clientX - this.startX;const deltaY = e.touches[0].clientY - this.startY;let newLeft = this.left + deltaX;let newTop = this.top + deltaY;newLeft = Math.max(0, Math.min(newLeft, this.screenWidth - this.btnWidth));newTop = Math.max(0, Math.min(newTop, this.screenHeight - this.btnHeight));this.left = newLeft;this.top = newTop;this.startX = e.touches[0].clientX;this.startY = e.touches[0].clientY;},handleTouchEnd() {// this.autoAttachToEdge();},// 拖動過程中觸發onDragChange(e) {// 實時更新位置// this.x = e.detail.x// this.y = e.detail.y},autoAttachToEdge() {// 吸附到左側或右側const midScreen = this.screenWidth / 2;if (this.left < midScreen) {this.left = 10; // 吸附到左邊} else {this.left = this.screenWidth - this.btnWidth - 10; // 吸附到右邊}},// 點擊按鈕的邏輯clickHandle(){}.btn {position: fixed;z-index: 999;}/* #ifndef MP-WEIXIN */.link {&::after {content: 'XXX';font-size: 24px;color: #fff;position: absolute;bottom: 4px;left: 0;line-height: 34px;width: 100%;text-align: center;z-index: 999;}}/* #endif *//* #ifdef MP-WEIXIN */.btn ::v-deep .u-image::after {content: 'XXX';font-size: 24px;color: #fff;position: absolute;bottom: 4px;left: 0;line-height: 34px;width: 100%;text-align: center;z-index: 999;}/* #endif *//* 拖拽區域必須設置尺寸 */.drag-area {width: 100%;position: fixed;pointer-events: none;/* 防止遮擋下方內容 */z-index: 999;}/* 可拖拽按鈕樣式 */.btn {width: 144rpx;height: 128rpx;pointer-events: auto;/* 允許交互 */}/* 隱藏movable-view默認邊框 */movable-view::before {display: none;}