Jump to content


clickable OR draggable in Draggable instances

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



first of all, nice job, really!


I've tried to get the info on forums and i wasn't lucky or didn't understand correctly, any help will be appreciated.


I'm trying to use drag and click callbacks on Draggable instances. In fact it works pretty well. The problem is that i want the instances to be clickable OR draggable. I don't want instances to be draggable until my app is in the correct context.


I know there is a method like disable()... but that would disable the whole instance and i just want to dissable one callback.


I know i could use native clickable, but i would prefer to keep al my events in a gsap code. Creatting/killing draggable instances while on native clicks looks ugly


I know i could put an if(condition) inside my 'onDrag' callback... but that wouldn't stop the drag action itself.


What do you thing would be the best approach? I see this case is a typical situation in web environment, but it seems like "Draggable" instances are all callbacks or noting... or i am wrong


Thank you in advance

Link to comment
Share on other sites

Hello jaumemiralles, and Welcome to the GreenSock Forum!


Have you looked at the Draggable Docs?




You can use the data attribute called dragClickables:false on those elements you dont want to drag, that are enabled.

  • dragClickables : Boolean - By default, Draggable will ignore clicks on <a>, <input> <select>,<button>, and <textarea> elements (as well as any element that has a data-clickable="true"attribute), allowing the browser's default behavior (like clicking on an input would give it focus and drop the cursor there to begin typing), but if you want Draggable to hijack those clicks and initiate dragging instead, set dragClickables:true.

If you are still having an issues please create a limted codpen demo showing your issue. This way we can test cod live and that is editable.




  • Like 4
Link to comment
Share on other sites

Also, you can add and remove event listeners instead of using callbacks. To prevent dragging, you can set the bounds to it's boundingClientRect. Change the bounds when you want to move it.

var dragger = new Draggable(element, {
  bounds: element.getBoundingClientRect()
  • Like 5
Link to comment
Share on other sites

Jonathan, Ok, we have dragClickables attribute... but i can't find in documentation which is the method to change attributes... it seems attribute can only be set on create

Link to comment
Share on other sites

OSUblake, again same doubt comes to me. You show me a constructor, nothing about adding eventlisteners after creating instance. I see in docs we have 'addeventlistener' but no info about 'remove', should i supose it's the same way as in plain javascript?

Link to comment
Share on other sites

Sometimes documentation can be incomplete or hard to understand. If you're having doubts, try it. 

See the Pen ?editors=0011 by osublake (@osublake) on CodePen

Link to comment
Share on other sites

Using a little twist on Blake's suggestion of using getBoundingClientRect() I am setting min and max x/y values for bounds based on the current x and y like:

var x = myDraggable.x;
var y = myDraggable.y;
myDraggable.applyBounds({minX:x, minY:y, maxX:x, maxY:y})



I don't think we intended for people to disable dragging and keeping other events active. This is the first time it's come up to my recollection. Might have to think about it a bit.


To remove a callback that you set in the constructor you can use:

myDraggable.vars.onPress = null;
Link to comment
Share on other sites

I'll try to explain in points:


- For me is a typical case that you want to drag&drop a list in some cases, and keep it fixed and ready to click and do things on it in other cases... maybe there is an easier way and i'm complicating everything


- I got it when i used the custom attribute data-clickable="true" for the whole target of the draggable instance. Thus, when it's true it's not draggable, and viceversa... perfect


- My problem now is that i realize that when data-clickable="true"... click and release callbacks in Draggable instance are disabled, while press is not... and i need the 3, and "data-clickable=true" might seem "yes, you can click it" .... really, i don't understand why, what's the point in this, and why it's so dificult something like "disable/enable dragging on custom action"

Link to comment
Share on other sites

  • Solution

For event listeners, 'this' refers to the target. For callbacks, 'this' refers to the draggable instance.


It might be easier to create the draggables when you need them. Here's a good example of that. I don't create any draggables up front. They are individually instantiated when a user clicks on one of the letters.


See the Pen dPEbey?editors=0010 by osublake (@osublake) on CodePen


You won't be able to notice when one is created. In fact, you can create and switch them out while you're dragging. This is a pretty advanced demo I made for somebody, but as you're dragging a picture between the two containers, new draggables are being created, killed, and swapped out, yet you can't tell. It's all seamless.


See the Pen ?editors=0010 by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

I'm very short on time and didn't have a chance to read through every post here, so I may be misunderstanding something but when you disable() the Draggable couldn't you simply add a regular click/touchpress/mousedown listener to the element itself? You just wanted to know when the element is pressed in that case, right? Again, perhaps I'm missing something obvious. 

  • Like 2
Link to comment
Share on other sites

At the end i'm taking Blake's option... in fact is what i used to have.

All this came because i wanted my code in a way that Draggables where persistent and all the callbacks and functionalities where inside the instance, not mixing Draggable's callbacks and 'traditional' eventlisteners for javascript. In that case i could have cleanner code and instances ready to use.

For what we have been commenting, i see it was not your original idea and greensock designed draggable just for that, and not handling different behaviors.

So i'm using draggable just for drag, creating and killing it just for the case i'm dragging, as Blake suggested, and everything works fine.


Thanks to all for your patience and the nice tips

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.