Jump to content
GreenSock

mimeartist

Best practise...

Go to solution Solved by GreenSock,

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

I have a div that is draggable in all directions, what's the best way to alter it so that it is only draggable in one axis?

 

e.g. going from type: 'left, top' and change it to just type : 'left'?

Link to comment
Share on other sites

Yep, exactly. Or type:"x" which will use transforms instead which generally perform better particularly on mobile devices. Either way is fine though. 

Link to comment
Share on other sites

Sorry... should of made more sense... how do I change on the fly a draggable that was in both directions, and then just set to one axis?

 

in fact is there a way of removing all the draggable features, and then applying new ones, concerned that applying a draggable twice might start to cause issues?

Link to comment
Share on other sites

PS If I start using draggable with type: 'x' do I need to change my TweenMax calls to x rather than left?

Link to comment
Share on other sites

  • Solution

It's tough to give you advice here without seeing any example. I'm not sure exactly what you're trying to do. Can you provide a simple codepen or some context? 

 

You asked about changing your TweenMax calls to x - what TweenMax calls? What are they supposed to be doing? Why are you using them?

 

If your goal is to lock the axis so that users can drag either ONLY horizontally or ONLY vertically, based on which direction they START moving, you can simply set lockAxis:true. 

 

As far as "removing all the draggable features and then applying new ones", please provide more details about what you're trying to do. I assume this sort of thing is possible, yes - you can always kill() a Draggable and recreate another one on the same element using different settings in the config object. 

  • Like 2
Link to comment
Share on other sites

Sorry for not supplying a  codepen... I'll give the kill() a try... I've got a load of images that you can drag around... but when they're enlarged they're only allowed to drag in one direction, so I was looking for a way to turn off one of the axis... but I'm doing a whole load of other stuff going on too, so I think kill will be best, as mutlipurposing the divs is a bit of a headache (for me anyway) 

 

Thanks Jack!

 

James 

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.
×