[Help]: How to tracking Drag Events in embla-carousel-react

[volunteer1024]

Summary

Description:

I am using embla-carousel-react to create a carousel component, where each child element is an image. Users can drag image or click on the left/right arrows to slide. I am now trying to track the number of times users drag images, but I am finding it difficult to listen for the onDrag event on the child components. I have attempted the following approaches without success:

1. Listening for the onDrag event directly on the Item component.
2. Using api.on('pointDown'), but this event is triggered for both clicks and drags, making it impossible to distinguish between the two actions.
3. Adding onDrag directly to child elements using a selector after the HTML is generated.

Question:

Is there a recommended way to effectively track drag events in embla-carousel-react? Any guidance or suggestions would be greatly appreciated!

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

https://codesandbox.io/p/sandbox/embla-carousel-default-react-forked-4tj833

[ineshbose]

I'm trying to implement the same 😬

[davidjerleke]

Hi @volunteer1024 and @ineshbose, could you take a look at this example?

[ineshbose]

Thanks for sharing this, but I believe this binds a listener to the carousel HTMLElement, while OP/mine use case is to bind to elements inside a slide to possibly reorder them and (re)save in a state.

What I could think is that the onDrag callback of img would also set watchDrag: false, but then dragging the img element on the edges of Y axis would have no scroll effect to the carousel to reorder slides/elements..

[davidjerleke]

@ineshbose have you tried this then?

const [emblaRef, emblaApi] = useEmblaCarousel({
  watchDrag: (emblaApi, mouseOrTouchEvent) => {
    /* TODO: Add your logic here, you can get mouseOrTouchEvent.target here for example */

    if (yourOwnCondition) {
      return false; // Disable Embla drag behaviour
    }

    return true; // Allow Embla drag behaviour
  },
});

...or:

const [emblaRef, emblaApi] = useEmblaCarousel({
  watchDrag: (emblaApi, mouseOrTouchEvent) => {
    /* TODO: Add your logic here, you can get mouseOrTouchEvent.target here for example */
    return yourOwnCondition;
  },
});