优化拖动

src/views/im/components/CallController/index.vue

@@ -20,7 +20,7 @@
         class="remote-video"
       ></video>
 
-      <!-- 本地视频小窗，可拖动 -->
+      <!-- 小窗可拖动 -->
       <video
         ref="localVideo"
         autoplay
@@ -29,7 +29,9 @@
         class="local-video-draggable"
         :style="{ top: localVideoPos.top + 'px', left: localVideoPos.left + 'px' }"
         @mousedown="startDrag"
+        @touchstart.prevent="startDrag"
       ></video>
+
     </div>
 
     <div class="btn-group">
@@ -157,6 +159,8 @@ onMounted(() => {
   wsStore.onMessageCallbacks.push(onMessage);
   document.addEventListener("mousemove", onDrag);
   document.addEventListener("mouseup", stopDrag);
+  document.addEventListener("touchmove", onDrag);
+  document.addEventListener("touchend", stopDrag);
 });
 
 onBeforeUnmount(() => {
@@ -165,19 +169,25 @@ onBeforeUnmount(() => {
   );
   document.removeEventListener("mousemove", onDrag);
   document.removeEventListener("mouseup", stopDrag);
+  document.removeEventListener("touchmove", onDrag);
+  document.removeEventListener("touchend", stopDrag);
 });
 
 // 拖动逻辑
 function startDrag(e) {
   dragging = true;
-  dragOffset.x = e.clientX - localVideoPos.value.left;
-  dragOffset.y = e.clientY - localVideoPos.value.top;
+  const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+  const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+  dragOffset.x = clientX - localVideoPos.value.left;
+  dragOffset.y = clientY - localVideoPos.value.top;
 }
 
 function onDrag(e) {
   if (!dragging) return;
-  localVideoPos.value.left = e.clientX - dragOffset.x;
-  localVideoPos.value.top = e.clientY - dragOffset.y;
+  const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+  const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+  localVideoPos.value.left = clientX - dragOffset.x;
+  localVideoPos.value.top = clientY - dragOffset.y;
 }
 
 function stopDrag() {