Prevent slide being draggable on some specific elements by a classname or attribute

[huannn1]

From my client's requirement, it would be great if an slide that contains input elements and we can prevent dragging slide on these inputs.
Maybe an attribute like is-draggable="false" or by a classname on the element or ?
Thank you

[davidjerleke]

Hi @huannn1,

Inputs shouldn't trigger any drag interaction. Here's a list of all excluded elements by default that won't trigger drag interactions. As you can see here, the drag interaction is cancelled for these elements.

However, if you want to add custom elements, the way to do it is to use the watchDrag option like so:

const options = {
  watchDrag: (emblaApi, event) => {
    // do your thing here
   
   // return true if Embla should start dragging
   return true
   
   // return false if Embla should cancel dragging
   return false
  }
}

🚨 Please note that you need v8.0.0-rc14 for this to work.

Best,
David

[plrthink]

Well, I want the offset effect, which I could drag the inputs element to trigger the slide, how I can customize this?

[davidjerleke]

@plrthink thanks for your question.I have no idea what you want to achieve. Please elaborate or share examples.

[huannn1]

It works with default HTML input, in my case it is an rich text input. I'll use watchDrag to cancel drag interaction as your response.

Thank you a lot : )