如何让 GreenSock 可拖动和 onClick 同时工作？

Question

我试图让用户浏览网站上的不同内容，方法是拖动时钟按钮将其旋转（使用 greensock 动画库创建）到指定的不同点以更改内容，或者单击在时钟按钮上，它也会旋转以更改内容。目前我可以做一个或另一个，但是一旦我启用两者并触发点击事件然后触发拖动事件（反之亦然），时钟按钮就会以错误的顺序捕捉到位置（但仍然是定义的snaps).

代码如下

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">

使用 onRotate 函数更改内容，该函数仅根据位置隐藏和显示元素。

Answer 1

这是工作代码：

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();
            }

        }
    });

如何让 GreenSock 可拖动和 onClick 同时工作？

How do I get GreenSock draggable and onClick working simultaneously?

javascript

gsap