How do I get GreenSock draggable and onClick working simultaneously?

Question

I am trying to enable the user to navigate through different content on the site by either, dragging the clock-button to rotate it (created using the greensock animation library) to different points specified to change the content or, clicking on the clock-button which also rotates to change the content. At the moment I can do one or the other, but as soon as I enable both and trigger a click event and then a drag event (or vice versa), the clock-button snaps to positions in the wrong order (but still the defined snaps).

The code is below.

var clockButton = document.querySelector('#clock-button');
var snaps = [0, 45, 135, 180, 225, 315, 360];
if ((window.screen.width > 1024) && (detectTouchscreen() === false)){
    var draggable = Draggable.create([clockButton], {
            type: "rotation",
            allowEventDefault: true,
            throwProps: true,
            onDrag: onRotate,
            liveSnap: function(value) {
            position = getClosestIndex((value + 360 * 99999999) % 360, snaps); //adding 360 * 999999999 in order to ensure it's always a positive rotational value
            return snaps[position];
            },
            onClick: function(){ 
                draggable[0].disable();
                if (snaps[position] === 0){
                    snaps[position] = 45;
                    draggable[0].enable();    
                } else if (snaps[position] === 45){
                    snaps[position] = 135;
                    draggable[0].enable();
                } else if (snaps[position] === 135){
                    snaps[position] = 180;
                    draggable[0].enable();
                } else if (snaps[position] === 180){
                    snaps[position] = 225;
                    draggable[0].enable(); 
                } else if etc....
                    
                }
            }
                
        });
}

<img id="clock-button" src="assets/img.png" 
			data-deg="0" data-toggle="tab">

The content is changed using the onRotate function which is just hiding and showing elements dependant on the position.

Answer 1

This is working code:

var draggable = Draggable.create(clockButton, {
            type: "rotation",
            dragResistance: .01,
            dragClickables: true,
            liveSnap: onLiveSnap,
            allowContextMenu:true,
            onClick: 
                function(e){ 
                adjusting = true;
                this.update();
                if (snaps[position] < 360){
                    snaps[position] = snaps[position ++];
                } else {
                    position = [1];
                }
                // console.log(snaps[position]);
                TweenLite.set(this.target, {
                    rotation: snaps[position]
                });
                this.endDrag();
                onRotate();

                adjusting = false;       
            },

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

        }
    });