greensock draggable/triggering點擊並拖動

Question

我有一個與綠色動畫相關的問題，但也可能是一個更普遍的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);   
}