greensock draggable/triggering click and drag

Question

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

codepen надеюсь, будет иллюстрировать то, что я пытаюсь сделать .. код внизу.

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

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

спасибо, Джастин

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

вне функции.

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

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