拖动歌词的处理

pages/makedetail/makeDetail.scss

@@ -445,6 +445,7 @@ page {
 		align-items: center;
 		background-color: rgba(0, 0, 0, 0.4);
 		padding: 30rpx;
+		cursor: grab;
 		
 		.lyrics-text {
 			color: #fff;
@@ -456,6 +457,10 @@ page {
 		}
 	}
 	
+	.lyrics-overlay:active {
+		cursor: grabbing;
+	}
+	
 	.play-button {
 		position: absolute;
 		top: 50%;

pages/makedetail/makeDetail.vue

@@ -33,8 +33,8 @@
 			</view> -->
 
 			<!-- 音乐类型时显示歌词 -->
-			<view class="lyrics-overlay" v-if="queueDetail.task_type == 2">
-				<text class="lyrics-text">{{ queueDetail.description }}</text>
+			<view class="lyrics-overlay" v-if="queueDetail.task_type == 2" @mousedown="startDrag" @mouseup="stopDrag" @mousemove="drag">
+				<text class="lyrics-text" ref="lyricsText" :style="{ transform: `translateY(${offsetY}px)` }">{{ queueDetail.description }}</text>
 			</view>
 
 			<!-- 音乐类型且状态为9时显示播放按钮 -->
@@ -211,7 +211,11 @@
 					update_time: '',
 					all_position: 0
 				},
-				myinfo: {}
+				myinfo: {},
+				offsetY: 0,
+				isDragging: false,
+				startY: 0,
+				initialOffsetY: 0
 			}
 		},
 		onLoad(parms) {
@@ -636,6 +640,35 @@
 						});
 					}
 				});
+			},
+			startDrag(event) {
+				this.isDragging = true;
+				this.startY = event.clientY;
+				this.initialOffsetY = this.offsetY || 0;
+			},
+			stopDrag() {
+				this.isDragging = false;
+			},
+			drag(event) {
+				if (this.isDragging) {
+					const deltaY = event.clientY - this.startY;
+					const newOffsetY = this.initialOffsetY + deltaY;
+
+					// Get the height of the lyrics text
+					const lyricsTextHeight = this.$refs.lyricsText ? this.$refs.lyricsText.clientHeight : 0;
+
+
+					// Define the threshold limits based on the height of the lyrics text
+					const minY = -lyricsTextHeight + 20; // Allow some space above
+					const maxY = 20;  // Allow some space below
+
+					// Apply the limits
+					this.offsetY = Math.min(Math.max(newOffsetY, minY), maxY);
+
+					// Log the height and current offset
+					console.log('Lyrics Text Height:', lyricsTextHeight);
+					console.log('Current Offset Y:', this.offsetY);
+				}
 			}
 		}
 	}