Is there a way to have Draggable work only on desktop and not on mobile?

[stefanobartoletti]

I've tried to read the Draggable docs, but I haven't found an explicit reference to this.

 

I've integrated a Draggable instance in one of my projects (It is based on Nuxt, but this does not seem to be relevant here), and the specific implementation should have the affected elements be draggable only on desktop viewports.

Is it possible to natively enable Draggable only on certain breakpoints, or should I use a custom function before firing Draggable itself?

Thanks

[Rodrigo]

Hi,

 

You can use GSAP MatchMedia for enabling some features using media queries:

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

Here is a simple demo:

See the Pen rNbMXVq by GreenSock (@GreenSock) on CodePen

 

Beyond that, ScrollTrigger has an isTouch property that gives some basic information:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch

 

So if your project is also using ScrollTrigger you can tap into that and do some conditional logic to create or not your Draggable instances.

 

Hopefully this helps.

Happy Tweening!

[stefanobartoletti]

Thanks. I will check these functions, probably matchMedia is what I need.

 

A possible alternative (specific to Vue) that I'm also considering is useBreakpoints from the VueUse package (I'm reporting this here as a possible reference for other people too), but probably the two options that you gave me are covering my need.

 

Thanks for your reply!

[Rodrigo]

Yeah, the useBreakpoints composable can be useful, but for GSAP related stuff I'd go with GSAP MatchMedia, since is a wrapper for a GSAP Context so everything gets reverted when the breakpoint is passed. With the composable you'll have to do cleanup manually for every single instance which can lead to errors or missing an instance.

 

Happy Tweening!