Гринсок перетаскиваемый / триггера нажмите и перетащите

Question

У меня есть проблема, которая связана с анимацией greensock, но также может быть более общей проблемой js в том, что мне нужно перенести событие mousedown во второй перетаскиваемый экземпляр после уничтожения первого перетаскиваемого экземпляра.

Надеюсь, кодовая ручка проиллюстрирует, что я пытаюсь сделать. Код находится ниже.

URL-адрес 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() {
      }
    });

Я борюсь за переключение между двумя настройками draggables на одном элементе, мне интересно, возможно ли это вообще. в основном у кодепа есть пример того, что я хочу сделать, но это не без проблем. draggable - это настройка для элемента типа x,y, что я хочу сделать, когда направление перетаскивания вверх, убить перетаскиваемый тип x, y и переключиться на тип: вращаемое перетаскивание, чтобы карта перемещалась по оси. Вы можете видеть, что мой делает это, но только если вы отпустите, а затем снова нажмете - есть ли способ сделать это плавным, поэтому он просто переключает середину перетаскивания?

спасибо джастин

Answer 1

Смотрите http://codepen.io/anon/pen/klanu

Я никогда не использовал гринсок, но только взглянул на их документ:

https://greensock.com/docs/

Прежде всего, у вас было несколько проблем в вашем коде. Вам не нужно создавать rotatedraggable внутри функции просто создайте ее, она все равно не включена. Я тоже переехала

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

вне функции.

В вашем втором Draggable, вы звонили createRotation чтобы создать вращение, но, как я уже сказал, вы можете создать его в начале. Когда div перемещен наверх, я просто отключил текущее перетаскивание и включил 1-й и вызвал dragStart в теме. e это то, что передается на 2-й.

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