Jump to content


setting draggable type to none?

Recommended Posts

I want to use draggable without it setting any style for me while dragging

I found out about zIndexBoost: false to prevent it from messing up with the z index values.


cant find anyway to prevent it from dealing with translate3d values, did I missed something?


thanks :)

Link to comment
Share on other sites

Hm. How exactly do you want Draggable to move the element if it doesn't affect any of its styles? I'm kinda confused. Did you mean that you want it to affect top/left instead of translateX/translateY? If so, you can just change the "type" property, like type:"left,top". Does that help?

Link to comment
Share on other sites

hmm I am new to gsap world so maybe I am missing something, draggable is the only "touch" module in greensock no?


I am creating an effect that can be controlled by dragging\touching very similar to slider\carousel but the only thing that change when dragget is the rotateY property of the element.


so I don't need any of the default styling options..

Link to comment
Share on other sites

Ah, I see. For that, it's probably best to use an invisible <div> or something and then use an onDrag to apply the x/y values to whatever other property you want (in this case, rotation). Check out the Draggable codepen collection http://codepen.io/collection/AtuHb/ - there are a few examples in there that might apply. OSUblake has done a bunch of demos like that too I believe. Maybe he'll swing by and offer some links :) 

Link to comment
Share on other sites

I can see it working great in the example but it has the feeling of some hack :)


maybe I can offer a new feature: a null type, it will make a lot of sense even in the examples you gave instead of using invisible div

actually it will be a good replacement for hammerjs for example.


Thanks a lot really appreciate your response.

Link to comment
Share on other sites

I would love a GSAP based gesture tool like hammer.js, but for now you can get most of that functionality from Draggable. And I wouldn't call using invisible div a hack. In fact, I would recommend using that method for most types of Dragging as it's going to give you the most flexibility. You can even use it with canvas.


Three.js example

See the Pen kkAGpv by osublake (@osublake) on CodePen


Here's a simple example of using rotationY on a dummy element... converting linear motion into rotary motion.

See the Pen ea3ee16b07bf39d3eb4d81609796dee6 by osublake (@osublake) on CodePen



  • Like 1
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.