greensock draggable / triggering click and drag

Question

I have an issue which is related to greensock animation but also may be a more general js issue in that I need to transfer a mousedown event to a second draggable instance after killing the first draggable instance.

the codepen hopefully will illustrate what i am trying to do.. code is underneath.

Codepen URL: 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() {
      }
    });

I am battling to switch between 2 draggables setup on same element, am wondering if this is possible at all. basically the codepen has an example of what I want to do, but it isnt seamless. draggable is setup for element of type x,y, what i want to do is when the drag direction is up kill the type x,y draggable and switch to a type: rotation draggable so that the card moves around on an axis. you can see mine does that, but only if you release and then click again - is there any way to make this seamless, so it just switches mid-drag ?

thanks, Justin

Answer 1

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

I've never used greensock but just had a look at their document:

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

First of all you had a couple of issues within your code. You don't need to create rotatedraggable inside a function, just create it, it's not enabled anyways. I also moved

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

outside the function.

In your 2nd draggable, you were calling createRotation to create the rotation but like I said you can create it at the start. When the div is moved to the top, I just disabled the current drag and enabled the 1st one and called dragStart on it. e is what's passed to drag of the 2nd.

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