web-base-h5/components/floating/floating.vue

<template>
	<view class="pop-service d-c d-c-c" :style="{ left: `${x}px`, top: `${y}px` }" @click="gotoService"
		@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
		<image class="pop-service-image" src="/static/images/service.gif" mode=""></image>
		<view class="pop-service-text tc">{{ '在线客服' }}</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				iosAudig: -1,
				startX: 0,
				startY: 0,
				x: 295, // 元素的x坐标
				y: 100, // 元素的y坐标
				scale: 1, // 元素的缩放比例
				initialX: 0,
				initialY: 0
			};
		},
		methods: {
			gotoService() {
				let userInfo = uni.getStorageSync("User");
				let src =
					"https://im1c5366d.7x24cc.com/phone_webChat.html?accountId=N000000033467&chatId=302384fb-eda1-436e-a5e9-c03a2dbd6e97&visitorId=" +
					userInfo.memberCode +
					"&nickName=" +
					userInfo.memberCode;
				window.open(src, "_blank");
			},
			gotoWeb(url) {
				this.gotoPage('/pages/webview/webview?url=' + encodeURIComponent(url));
			},
			handleTouchStart(event) {
				// 记录元素的初始位置
				this.initialX = event.changedTouches[0].clientX;
				this.initialY = event.changedTouches[0].clientY;
			},
			handleTouchMove(event) {
				// 计算拖动的距离
				const deltaX = event.changedTouches[0].clientX - this.initialX;
				const deltaY = event.changedTouches[0].clientY - this.initialY;
				// 更新元素的位置和缩放比例
				this.x += deltaX;
				this.y += deltaY;

				// 更新元素的初始位置为最后一次拖动的结束位置
				this.initialX = event.touches[0].clientX;
				this.initialY = event.touches[0].clientY;
				event.preventDefault(); // 阻止默认行为，防止触发点击事件
			},
			handleTouchEnd(event) {

				console.log('handleTouchEnd');
				console.log(this.x);
				console.log(this.y);
				if (this.x >= 343) {
					this.x = 343;
				}
				if (this.x <= -30) {
					this.x = -30;
				}
				// if (this.y >= 343) {
				// 	this.y = 343;
				// }
				if (this.y <= -30) {
					this.y = -30;
				}
				// 在这里记录第一次拖动的结束位置，以便第二次拖动时使用
				// this.initialX = event.changedTouches[0].clientX;
				// this.initialY = event.changedTouches[0].clientY;
			},
			handleDrag(e) {
				// 获取拖动元素的当前位置
				var x = event.clientX;
				var y = event.clientY;

				// 计算拖动的距离
				var dx = x - startX;
				var dy = y - startY;

				// 更新元素的位置
				this.x = startX + dx + 'px';
				this.y = startY + dy + 'px';

				// 判断是否达到拖动阈值，并触发拖动事件
				if (Math.abs(dx) > dragThreshold || Math.abs(dy) > dragThreshold) {
					// 触发拖动事件，传递拖动的距离和方向信息
					dispatchEvent(event);
				}
				e.preventDefault(); // 阻止默认行为，防止触发点击事件
			}
		}
	};
</script>

<style lang="less" scoped>
	.tc{
		text-align: center;
	}
	.d-c {
		flex-direction: column;
	}
	.d-c-c{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.pop-service {
		position: fixed;
		top: 20%;
		right: 39rpx;
		width: 138rpx;
		box-sizing: border-box;
		background: rgba(#ffffff, 0.45);
		padding: 18rpx 20rpx;
		border-radius: 20rpx;
		z-index: 101;
		touch-action: none;

		.pop-service-image {
			width: 54rpx;
			height: 54rpx;
			margin-bottom: 15rpx;
		}

		.pop-service-text {
			font-size: 20rpx;
			color: #333;
		}
	}
</style>