Disabling Default Styles Applied by Draggable for Text Selection

[chris_hengst]

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.

 

[Rodrigo]

Hi,

 

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", {...});

d[0].disable();
gsap.set(".box", { clearProps: "userSelect" });

Hopefully this helps.

Happy Tweening!