Greg M

[greg_mich 0 Likes (Newbie)]

I am using draggable on a custom keyboard. The issue I run into is when you accidentally drag on the keys the keyboard drags and the key press is not fired. My question is, is there a way to only drag a component from the background? And not allow drag on inner elements?

[PointC 8,599 Likes (Superhero)]

It sounds like you'd want to set dragClickables to false. From the docs.

• dragClickables:  Boolean - By default, Draggable will work on pretty much any element, but sometimes you might want clicks on <a>, <input> <select>,<button>, and <textarea> elements (as well as any element that has a data-clickable="true"attribute) NOT to trigger dragging so that the browser's default behavior fires (like clicking on an input would give it focus and drop the cursor there to begin typing), so if you want Draggable to ignore those clicks and allow the default behavior instead, set dragClickables:false. (note: before GSAP 2.0.0, dragClickables was false by default)

 

https://greensock.com/docs/Utilities/Draggable

 

Hopefully that helps. Happy tweening.

[greg_mich 0 Likes (Newbie)]

Do I apply this in my create function or on  the elements themselves? I am also using Vue.js by the way.

[PointC 8,599 Likes (Superhero)]

Here's a basic setup.

 

See the Pen MMKjyG by PointC (@PointC) on CodePen

 

Happy tweening.

[greg_mich 0 Likes (Newbie)]

Is there a way to apply that to specific divs? And not just buttons?

[PointC 8,599 Likes (Superhero)]

See the Pen JQGRpP by PointC (@PointC) on CodePen