diff --git a/src/views/SwipeView.vue b/src/views/SwipeView.vue index 37bf65e..6438beb 100644 --- a/src/views/SwipeView.vue +++ b/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); };