Jump to content
Search Community

few questions about Draggable

Chrysto test
Moderator Tag

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 GSAP team,

 

I've just started digging into the new Draggable plugin. It is absolutely awesome game-changer!!! I'm creating now a simple touch-slider ( to test the capabilities to the max ) and just wanted to ask few questions.

 

1) Is there a way to get element top and left ( x/y ) position via the Draggable, regardless of the type I've decided to use? It would be great to have such a feature, added to xMin, xMax etc that you can get on onDrag() method via this.

 

2) I plan to create external controls for the slider using the scrollTo plugin. is there a better way ( something like hidden feature ) to move the slider and it continue dispatches event without the scrollTo plugin?

 

P.S. haven't slept that night, so I confused at the post ( the whole scrollTo thing ) . I just use regular TweenLite to animate the scroll of top and left position 

 

 

 

And once again - thanks for the plugin. It's probably the smoothest JS motion I've seen on touch interaction. 

Link to comment
Share on other sites

Glad you're enjoying Draggable. I have good news for you...

  1. I've attached an updated version of Draggable that adds a "x" and "y" properties to the Draggable instance(s). So you can get those values very easily. 
  2. The new version also has a really interesting new capability - you can set type:"scroll" and it'll make the content inside of that div drag-scrollable! And set type:"scrollTop" if you just want it to scroll up and down, or type:"scrollLeft" to scroll horizontally only. The goal was to make it very fluid, just like the native iOS scrolling, but even better (you can tweak values to get exactly the feel you want). And it doesn't use a fake/simulated scrollbar like most of the other tools out there - it's the real, native scrollbar from your OS and it reacts to the mouse wheel and everything. And of course you need ThrowPropsPlugin (a members-only benefit of Club GreenSock) to enable the flick-scrolling. I know you're already a member - I'm just mentioning it for others who are reading this. 
  3. I improved touch performance for mobile devices in this most recent version (not that it was bad before, but it's even better now).
  4. There's a quick demo I whipped together here that shows all the various types and it generates sample code: http://greensock.com/js/demo/throwprops/ (that link will be good for at least the next week)

I didn't quite understand your question #2 - could you elaborate? Since you were mentioning scrollTo, maybe the new type:"scroll" already addresses your concern and saves you a bunch of work (I hope so). Otherwise, let me know what exactly you're looking for. 

 

That new scroll feature should even work all the way back to IE8! And trust me - it was a royal pain in the butt to build because of all the differences amongst browser vendors but I think the end result is pretty solid, at least according to my tests thus far. 

 

Kick the tires of this new version and let me know what you think. Happy tweening...er...dragging!

Link to comment
Share on other sites

Okay, I fixed that x/y reference and added some more sweetness to Draggable ;) You can now implement snapping behavior. I haven't had a chance to update the docs yet, but if you want to see an example of the snapping syntax, you can see the source of either of these two demos:

 

http://www.greensock.com/js/demo/throwprops/toss.html

http://www.greensock.com/js/demo/throwprops/spin.html

 

I've attached the latest Draggable. Let me know if it works well for you. 

Draggable.js.zip

  • Like 1
Link to comment
Share on other sites

Thanks Jack, thank you very much. I'm now creating widget similar to this one : http://blizoo.bg/tv-program.html . The horizontal and vertical divs have to be perfectly synced. The div that I drag have very large dimensions and is updated via AJAX, and still the draggable plugin handles it very well. I use ThrowProps plugin, and disable it on mobile devices. The performance is fantastic! Since I use premium GreenSock plugins I can't post the whole project on the forum, but here is my code :

 

http://pastebin.com/AXWFwhHD

 

To update the elements I used:

 

  1. TweenLite.set( self.$timeline, {left: self.$schedule.css("left") } );                            TweenLite.set( self.$channels, {top: self.$schedule.css("top") } );

 

 

 

But setting and getting positions on every update seems slow to me and just thought since they're already calculated, getting them from the plugin would be faster.

 

Once again, thank you for the plugin and the modifications. It makes developer life so much easier!

  • 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.
×
×
  • Create New...