Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
potatoDie

Draggable drag event

Go to solution Solved by Carl,

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

Hi,

 

I'd like to replace jQuery's draggable by GreenSock Draggable (possibly with throwprops), but it seems it doesn't have a on-drag-event. Is that right?

BTW, I would like it very much if the documentation of the utilities mentions dependencies.

See the Pen VYmLxb by potatoDie (@potatoDie) on CodePen

Link to comment
Share on other sites

Hi potatoDie  :)

 

you should to use this : onDrag:function(){}

 

pls check this out :

 

See the Pen ogYXmW by MAW (@MAW) on CodePen

 

and pls read the Draggable Doc. , you'll find all of GSAP Draggable events ( onPress , onDragStart , onDrag , onDragEnd , ... ect )  :

 

http://greensock.com/docs/#/HTML5/Drag/Draggable/

 

and if you want to use throwProps:true on the Draggable . ThrowPropsPlugin will only work if you are using the version you get when you purchase a  Club GreenSock Membership (Shockingly or Business Green). 

  • Like 2
Link to comment
Share on other sites

Hi PotatoDie,

 

Nice work converting your Kaleidoscope pen to use Draggable

 

The dependencies for Draggable were listed in the "notes, dependencies and limitations" section of the Draggable docs, but I just added them as Requirements at the very top of the page so it will be much easier to find. Thanks for pointing that out. If you come across anything in the docs or any resources that you think could be clearer, please don't hesitate to let us know.

 

FYI I'm the one that add the animation the other day: http://codepen.io/GreenSock/full/pvEMPW/

Really impressed with how you made it. Now I it looks like I should be using Draggable too ;)

  • Like 3
Link to comment
Share on other sites

Thank you!

Unfortunately I still cannot find the events in the docs, sorry. (But it's clear now.)

Would it be alright to use throwProps on Codepen for non-members?

 

Yes, Carl, I'm much honoured by your fork of the Manhattan kaleidoscope! Would make sense to use GSAP draggable I think, especially since it handles touch events too!

Link to comment
Share on other sites

  • Solution

Yup, you can use ThrowProps on CodePen, perfectly fine. 

In fact, Diaco's pen already has it hooked up, so feel free to fork it.

It uses a special version of ThrowProps that will only work on CodePen.

 

As for finding the onStart, onDrag, onDragEnd and other callbacks of Draggable, please be sure you click the "show more" button and scroll way down :)

They are part of the config object description.

 

See here: http://prntscr.com/5n3pxc

  • Like 2
Link to comment
Share on other sites

You are right, it's all there. I just missed it (expecting the events after the lists of properties and methods I suppose).

Thanks a lot!

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