Jump to content
Search Community

Disabling Default Styles Applied by Draggable for Text Selection

chris_hengst test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hey ho!


I am currently working on an application where text selection should be prevented. However, I've noticed that GSAP's (3) Draggable automatically applies certain styles like touch-action: pan-y; -webkit-touch-callout: none; cursor: grab; -webkit-user-select: none;  to the draggable elements (or triggers) by default. In some cases (for example, when calling myDraggable.disable()-webkit-user-select: none; gets changed to-webkit-user-select: text; which results in unwanted behaviors in my app.


I've been searching for a solution to disable or override this default behavior but haven't been able to find one. Is there a way to prevent Draggable from setting these styles automatically?


Thank you for your help.


Link to comment
Share on other sites

  • Solution



There is not a lot we can do without a minimal demo. Also I'm a bit confused, you mention that you want to prevent users from selecting the text of an element that can be dragged around using GSAP Draggable, and the plugin does exactly that with the styles it applies to the element.


If you want to disable the instance and prevent the text from being selected after, then simply you can use clearProps to remove that particular style from the element after disabling the Draggable instance:

const d = Draggable.create(".box", {...});

gsap.set(".box", { clearProps: "userSelect" });

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...