Question

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

代码如下。

＆＃13;

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

＆＃13;

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

＆＃13;

使用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同时工作？

1 个答案: