greensock可拖動/觸發點擊和拖動

Question

我有一個與greensock動畫有關的問題，但也可能是一個更一般的js問題，因為在殺死第一個可拖動實例之后，我需要將mousedown事件轉移到第二個可拖動實例。

Codepen希望可以說明我正在嘗試做的事情。代碼在下面。

Codepen網址： http ：//codepen.io/anon/pen/ypdGn

var detachdraggable;
var rotatedraggable;

function makeRotateDraggable() {


    // create rotate draggable for the cards..
    rotatedraggable = Draggable.create(".dragclone", {
        type:"rotation", 
        throwProps:true, 
        dragResistance : 0,
        edgeResistance : 1,
        bounds:{minRotation:-60, maxRotation:60},
        onDragStart : function() {
            var $el = $(this.target);
            var cardStartAngle = $el.data('startangle');
        },
        onDrag: function() {

            currentCardAngle = this.rotation;

            var $el = $(this.target);
            var cardStartAngle = $el.data('startangle');

            cardDirection = ( currentCardAngle > cardStartAngle ) ? "up":"down";
            cardTravelDegrees =  Math.abs(currentCardAngle - cardStartAngle);   

            this.vars.type = "x";       
        },
        onDragEnd: function() {

        },
        onClick: function() {
          return false;
        }

    });

    $('.dragclone').mousedown(function() { 
        $('.dragclone').css('z-index','10');
        rotatedraggable[0].enable();        
    });

    $('.dragclone').mouseout(function() { 
        detachdraggable[0].disable();
        $('.dragclone').trigger('mousedown');
    });

    $('.dragclone').trigger('mouseout');
}



// first setup the x,y draggable..
detachdraggable = Draggable.create('.dragclone', {
      type: "x,y",
      edgeResistance:1,
      throwProps:true,
      onPress:function() {
        startX = this.x;
        startY = this.y;    
      },
      onDrag:function() {  

        var xChange = this.x - startX,
            yChange = this.y - startY,
            ratio = Math.abs(xChange / yChange),
            direction = [];

        // NB:: you can adjust these ratio thresholds to make things 
        // more or less sensitive to diagonal movement. 
        if (ratio > 0.25) { 
          direction.push((xChange < 0) ? "left" : "right");
        }
        if (ratio < 4) {
          direction.push((yChange < 0) ? "up" : "down");
        }

        if(direction[0] == "left") {
            // TweenMax.to( $('.cloned'), .0001, {right:-xChange + 135});           
        }

        // moving up so lets switch cards !!
        if(direction[0] == "up") {

              if(Math.abs(yChange) > 20) {    
                   makeRotateDraggable();
              }

        }

      },
      onDragEnd:function() {
        // driftDragCardBack();
          // if(!cardPopping) { driftClonedCardBack(); }
      },
      onThrowComplete: function() {
      }
    });

我正在努力在同一元素的2個可拖動對象設置之間切換，想知道這是否完全可能。 基本上，codepen給出了我要執行的操作的示例，但是它不是無縫的。 draggable是為x，y類型的元素設置的，我要做的是在向上拖動方向時殺死類型為x，y的可拖動對象並切換為以下類型：可拖動旋轉，以使卡在軸上移動。 您可以看到我的功能，但前提是您先松開然后再次單擊-有沒有任何方法可以使它無縫連接，所以僅在中間拖動時切換？

謝謝，賈斯汀

Answer 1

見http://codepen.io/anon/pen/klanu

我從沒使用過greensock，只是看了看他們的文檔：

https://greensock.com/docs/#/HTML5/Drag/Draggable/startDrag/

首先，您的代碼中有幾個問題。 您無需在函數內部創建rotatedraggable ，只需創建它，無論如何都不會啟用它。 我也感動了

$('.dragclone').mousedown(function() { 
    $('.dragclone').css('z-index','10');
    detachdraggable[0].enable();
});

功能之外。

在第二個可拖動對象中，您調用了createRotation來創建旋轉，但是就像我說的那樣，您可以在開始時創建它。 當div移動到頂部時，我只是禁用了當前拖動並啟用了第一個拖動，並在其上調用了dragStart 。 e是傳遞給第二個拖動的東西。

if(Math.abs(yChange) > 20) {    
    detachdraggable[0].disable();
    rotatedraggable[0].enable();        
    rotatedraggable[0].startDrag(e);        
}