фикс карточек

src/views/SwipeView.vue

@@ -227,6 +227,8 @@ const isDragging = ref(false);
 const dragStartX = ref(0);
 const dragStartY = ref(0);
 const dragOffset = ref({ x: 0, y: 0 });
+const dragStartTime = ref(0); // Добавляем время начала перетаскивания
+const hasActuallyMoved = ref(false); // Флаг, что было реальное движение
 
 // Вычисляемые свойства
 const currentUserToSwipe = computed(() => {
@@ -379,9 +381,14 @@ const endTouch = (event) => {
 
 // Обработчики mouse событий
 const startDrag = (event) => {
+  // Предотвращаем drag для изображений и других элементов
+  event.preventDefault();
+  
   isDragging.value = true;
   dragStartX.value = event.clientX;
   dragStartY.value = event.clientY;
+  dragStartTime.value = Date.now(); // Записываем время начала
+  hasActuallyMoved.value = false; // Сбрасываем флаг движения
   
   // Сброс смещения
   dragOffset.value = { x: 0, y: 0 };
@@ -397,37 +404,63 @@ const moveDrag = (event) => {
   const currentX = event.clientX;
   const currentY = event.clientY;
   
+  const newOffsetX = currentX - dragStartX.value;
+  const newOffsetY = currentY - dragStartY.value;
+  
+  // Проверяем, было ли реальное движение (больше 3 пикселей)
+  if (Math.abs(newOffsetX) > 3 || Math.abs(newOffsetY) > 3) {
+    hasActuallyMoved.value = true;
+  }
+  
   dragOffset.value = {
-    x: currentX - dragStartX.value,
-    y: currentY - dragStartY.value
+    x: newOffsetX,
+    y: newOffsetY
   };
   
-  // Определяем направление свайпа для индикаторов
-  if (Math.abs(dragOffset.value.x) > Math.abs(dragOffset.value.y)) {
-    if (dragOffset.value.x > 20) {
-      swipeDirection.value = 'right';
-    } else if (dragOffset.value.x < -20) {
-      swipeDirection.value = 'left';
-    } else {
-      swipeDirection.value = null;
+  // Применяем стили только если было реальное движение
+  if (hasActuallyMoved.value) {
+    // Определяем направление свайпа для индикаторов
+    if (Math.abs(dragOffset.value.x) > Math.abs(dragOffset.value.y)) {
+      if (dragOffset.value.x > 20) {
+        swipeDirection.value = 'right';
+      } else if (dragOffset.value.x < -20) {
+        swipeDirection.value = 'left';
+      } else {
+        swipeDirection.value = null;
+      }
+      
+      // Применяем небольшой поворот для естественности
+      const rotate = dragOffset.value.x * 0.05;
+      
+      // Точное следование за курсором
+      cardStyle.value = {
+        transform: `translateX(${dragOffset.value.x}px) rotate(${rotate}deg)`,
+        transition: 'none'
+      };
     }
-    
-    // Применяем небольшой поворот для естественности
-    const rotate = dragOffset.value.x * 0.05;
-    
-    // Точное следование за курсором
-    cardStyle.value = {
-      transform: `translateX(${dragOffset.value.x}px) rotate(${rotate}deg)`,
-      transition: 'none'
-    };
   }
 };
 
 const endDrag = () => {
   if (!isDragging.value) return;
   
-  // Проверяем, достаточно ли было смещение для действия
-  if (Math.abs(dragOffset.value.x) > swipeThreshold) {
+  const dragDuration = Date.now() - dragStartTime.value;
+  const totalMovement = Math.sqrt(
+    Math.pow(dragOffset.value.x, 2) + Math.pow(dragOffset.value.y, 2)
+  );
+  
+  // Проверяем условия для выполнения действия:
+  // 1. Было реальное движение больше порога
+  // 2. Горизонтальное смещение больше вертикального
+  // 3. Общее движение больше минимального
+  // 4. Время перетаскивания больше минимального (избегаем случайных кликов)
+  const shouldTriggerAction = hasActuallyMoved.value && 
+                             Math.abs(dragOffset.value.x) > swipeThreshold &&
+                             Math.abs(dragOffset.value.x) > Math.abs(dragOffset.value.y) &&
+                             totalMovement > 10 &&
+                             dragDuration > 100; // Минимум 100ms для считывания как drag
+  
+  if (shouldTriggerAction) {
     // Если перетаскивание было достаточно большим, выполняем действие лайка/пропуска
     if (dragOffset.value.x > 0) {
       cardStyle.value = {
@@ -443,7 +476,7 @@ const endDrag = () => {
       setTimeout(() => handlePass(), 300);
     }
   } else {
-    // Если перетаскивание небольшое, возвращаем карточку в исходное положение
+    // Если это был простой клик или недостаточное перетаскивание, возвращаем карточку в исходное положение
     cardStyle.value = {
       transform: 'none',
       transition: 'transform 0.3s ease'
@@ -453,6 +486,8 @@ const endDrag = () => {
   
   // Сбрасываем состояние и удаляем слушатели
   isDragging.value = false;
+  hasActuallyMoved.value = false;
+  dragStartTime.value = 0;
   document.removeEventListener('mousemove', moveDrag);
   document.removeEventListener('mouseup', endDrag);
 };