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个draggables之间进行切换，我想知道这是否可行。基本上，codepen有一个我想做的例子，但它并不是无缝的。 draggable是为x，y类型的元素设置的，我想要做的是当拖动方向向上杀死类型x，y draggable并切换到类型：旋转可拖动以便卡在轴上移动。你可以看到我的确如此，但只有当你发布然后再次点击时 - 是否有任何方法可以实现这一点，所以它只是在中途拖动？

感谢，贾斯汀

Answer 1

请参阅http://codepen.io/anon/pen/klanu

我从未使用过绿色帆船，只是看看他们的文件：

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

greensock draggable /触发点击和拖动

1 个答案: