Jump to content
Search Community

Draggable onClick enable rotation

fr8877 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

Hey friends,

I'm trying to get my element to have the same behaviour when it is clicked as when it is dragged and I just can't seem to make it happen.
The jsfiddle is: https://jsfiddle.net/fr8877/zpsem6mc/173/
In my actual project the clock button does rotate on click but if you try and drag after you've clicked or click after you've dragged, it works for a couple of snaps and then breaks.

In the jsfiddle the clock button just doesn't rotate at all. Its my first time using it so I'm not sure where I've gone wrong there. 

Please help! :)

 

Link to comment
Share on other sites

If you mean you want the draggable to snap with mouse whenever you click, following demo will help you. I am using onPress event instead of onClick because to click you need to lift mouse. It also snaps at every 90 degrees but you can remove that logic or change it.

 

See the Pen XEgOoQ by Sahil89 (@Sahil89) on CodePen

 

if you want to use throwProps plugin then check demo in following thread,

 

 

For explanation about this entire effect, check comments in demo from following thread,

 

 

  • Like 3
Link to comment
Share on other sites

Sorry, I'm having a difficult time understanding what you need. The information Sahil provided seemed like it would give plenty to experiment with. 

 

Perhaps  you can rephrase question or alter the demo to be more clear. 

Link to comment
Share on other sites

Sorry, I'm very new to this. Lets see if I can explain a bit better.
What I am trying to do is very similar to this https://greensock.com/forums/topic/16022-draggable-spin-getting-it-to-fully-rotate-instead-of-stopping/

except that it also allows onClick. 
My problem is that if `onClick` is enabled, when you drag the `liveSnap` skips the some of the numbers in the `snaps` array. It only happens on drag, not on click.  There doesn't seem to be any pattern to the numbers skipped. 
I've fixed my code up a bit, thanks to Sahils example above but, it is still doing it. 

The `onRotate` function is only toggling the visibility of other elements on the page and does not effect the draggable element.

 

I hope this is clearer, thanks for sticking with me!

var position = 0;
var snaps = [0, 45, 135, 180, 225, 315, 360];
var adjusting = false;
var clockButton = document.querySelector('#clock-button');

function getClosestIndex(value, choices) {
  var i = choices.length;
  var closest = 0;
  var absDif = 9999999999;
  var dif, val;
  while (--i > -1) {
    val = choices[i];
    dif = Math.abs(val - value);
    if (dif < absDif) {
      closest = i;
      absDif = dif;
    }
  }
  return closest;
}

function onLiveSnap(value) {
            position = getClosestIndex((value + 360 * 99999999) % 360, snaps); 
            onRotate(snaps[position]);
            return snaps[position];
         }

    
var draggable = Draggable.create([clockButton], {
  type: "rotation",
  dragResistance: 0,
  onDrag: onRotate,
  liveSnap: onLiveSnap,
  onClick: function(e){ 
    adjusting = true;
    this.update();
    if (snaps[position] === 0 ){
      snaps[position] = 45;  
    } else if (snaps[position] === 45){
      snaps[position] = 135;

    } else if (snaps[position] === 135){
      snaps[position] = 180;

    } else if (snaps[position] === 180){
      snaps[position] = 225;

    } else if (snaps[position] === 225){
      snaps[position] = 315;

    } else {
      snaps[position] = 0;  
    } 
    TweenLite.set(this.target, {
      rotation: snaps[position]
    });
    this.endDrag();

    adjusting = false;       
  },

  onRelease: function() {
    if(this.tween && (adjusting || this.timeSinceDrag() > 0.02)){
      this.tween.kill();
    }

  }
});

 

Link to comment
Share on other sites

Ah, I think I see what you want. Here's a codepen: 

 

 

The concept is borrowed from this one (which is actually more complex because it needed to be implemented onPress so that you could continue dragging from that spot, but your demo doesn't require that)...

 

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

 

Does that help? 

  • Like 2
Link to comment
Share on other sites

Ummm, not quite haha 

The click is working how I would like it to (clicking anywhere on the element just iterates to the next item in the array which defines the content behaviour), it's the drag that is not behaving how I would expect.
I would think that dragging it would also move linearly through the snaps array but after completing a full rotation it misses items in the array and goes straight on to the next one. This happens when being dragged in either direction.

Link to comment
Share on other sites

13 hours ago, fr8877 said:

it's the drag that is not behaving how I would expect.
I would think that dragging it would also move linearly through the snaps array but after completing a full rotation it misses items in the array and goes straight on to the next one. This happens when being dragged in either direction.

 

I'm lost. Can't reproduce this behavior (though perhaps I'm misunderstanding). Can you please try explaining it more clearly, or tell me exactly how to reproduce the issue? 

 

Also, I don't think you need to define an "onDrag" at all in your Draggable since you've got a liveSnap defined and it seems like you're duplicating logic. 

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