Jump to content
GreenSock

michael.fromtheoutfit

Detecting value of selected Draggable Item

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

Hey folks,

 

I apologize if I'm just missing this in the docs. We are implementing something very similar to: 

 

See the Pen gnoDc by GreenSock (@GreenSock) on CodePen

 

For some reason, I can't figure out how to access the id of the selected element in order to use the value in a form. For example, assuming that each of the content divs had a unique id hung on them and I rotated the dial until the "Three" slide was visible, how can I trigger an event and get the id of the selected div?

 

Thanks so much for the help!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Interesting feature the one you're after.

 

What you could do is add a onThrowComplete callback and using the math already in place in the sample you can get a value between 0 and 8 (in this case there are 9 sections, but if you add more or less it still works) which returns the index position of the visible element, once the ThrowProps tween is completed, of the visible element.

 

If you use this code:

//create the knob Draggable
Draggable.create(knob, {
  type:"rotation",
  throwProps:true,
  edgeResistance:0.85,
  bounds:{minRotation:0, maxRotation:360},
  onDragStart:killTweens,
  onDrag: onRotateKnob,
  onThrowUpdate: onRotateKnob,
  onThrowComplete:function()
  {
    //returns the index position of the current visible item
    console.log( this.rotation / (360 / (sections - 1)) );
  },
  snap: function(endValue) {
    var step = 360 / (sections - 1);
    return Math.round( endValue / step) * step;
  }
});

//create the content Draggable
Draggable.create(content, {
  type:"scrollTop", 
  edgeResistance:0.5, 
  throwProps:true,
  onDragStart: killTweens,
  onThrowComplete:function()
  {
    //returns the index position of the current visible item
    console.log( this.y / (-maxScroll / (sections - 1)) );
  },
  snap: function(endValue) {
    var step = maxScroll / (sections - 1);
    return Math.round( endValue / step) * -step;
  }
});

You'll see in the console the number and if you create a jQuery object with the elements collection you'll have no problem in getting the visible one.

 

Rodrigo.

  • Like 2
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.
×