Merge pull request #507 from Tofandel/patch-6

fix: allow users to pinch zoom on mobile and prevent click properly only if user drags more than 10px

Author: ismail9k

playground/App.vue

@@ -171,7 +171,7 @@ const handleReset = () => {
   items.splice(0, items.length, ...defaultSlides)
 }
 
-const handelButtonClick = () => {
+const handleButtonClick = () => {
   alert('Button clicked')
 }
 
@@ -264,7 +264,7 @@ onMounted(() => {
             >
               <h3>{{ item.title }}</h3>
               <p>{{ item.description }}</p>
-              <button @click="handelButtonClick">This is a button</button>
+              <button @click="handleButtonClick">This is a button</button>
             </div>
           </CarouselSlide>
           <template #addons>

src/components/Carousel/Carousel.css

@@ -7,7 +7,7 @@
   height: var(--vc-carousel-height);
   overscroll-behavior: none;
   position: relative;
-  touch-action: pan-y;
+  touch-action: pan-x pan-y pinch-zoom;
   z-index: 1;
 }
 

src/components/Carousel/Carousel.ts

@@ -423,6 +423,11 @@ export const Carousel = defineComponent({
         threshold,
       })
 
+      // Prevent unnecessary reactivity
+      if (draggedSlides === 0) {
+        return
+      }
+
       activeSlideIndex.value = config.wrapAround
         ? currentSlideIndex.value + draggedSlides
         : getNumberInRange({

src/composables/useDrag.ts

@@ -35,7 +35,10 @@ export function useDrag(options: UseDragOptions) {
 
     isTouch = event.type === 'touchstart'
 
-    if (!isTouch) {
+    if (isTouch && (event as TouchEvent).touches.length > 1) {
+      // If there is more than 1 finger on the screen, avoid drag start (this allows user to pinch zoom)
+      return
+    } else if (!isTouch) {
       event.preventDefault()
       if ((event as MouseEvent).button !== 0) {
         return
@@ -58,6 +61,10 @@ export function useDrag(options: UseDragOptions) {
   }
 
   const handleDrag = throttle((event: TouchEvent | MouseEvent): void => {
+    if (isTouch && (event as TouchEvent).touches.length > 1) {
+      return
+    }
+
     isDragging.value = true
 
     const currentX = isTouch
@@ -76,12 +83,13 @@ export function useDrag(options: UseDragOptions) {
   const handleDragEnd = (): void => {
     handleDrag.cancel()
 
-    if (!isTouch) {
-      const preventClick = (e: MouseEvent) => {
+    const draggedDistance = Math.abs(dragged.x) + Math.abs(dragged.y);
+
+    if (!isTouch && draggedDistance > 10) {
+      window.addEventListener('click', (e: MouseEvent) => {
         e.preventDefault()
-        window.removeEventListener('click', preventClick)
-      }
-      window.addEventListener('click', preventClick)
+        e.stopPropagation()
+      }, { once: true, capture: true })
     }
 
     options.onDragEnd?.()