Update snapping onDragEnd

[usheeen 6 Likes (Newbie)]

Is it possible to set snapping onDragEnd?

 

I've tried...

onDragEnd: function(){
  if(this.endY < 100){
    draggable[0].vars.snap = function(){
      return 0;
    }
  }
}

and...

onDragEnd: function(){
  if(this.endY < 100){
    draggable[0].vars.snap = [0];
  }
}

but neither seems to work.

 

I'm guessing this is because the snapping tween is created before this point, any ideas?

 

Note: this is a simplified example, my actual application has has much more logic for evaluating where it should snap. Hence cannot define it when creating the Draggable.

[OSUblake 9,990 Likes (Superhero)]

I got it working with both your examples, but CodePen is doing maintenance right now so I can't save. The only thing I changed is that I referenced the draggable using "this" instead of draggable[0]. How are you getting that value if your function is anonymous?

 

Also, wouldn't it be better to do that in the snap function since it will pass you the end value?

[GreenSock 8,117 Likes (Superhero)]

Blake beat me to it (which I love ). If I understand correctly, wouldn't your logic be better wrapped in a function? That way, you can use whatever logic you want on-the-fly. In other words, your "snap" would literally be a function. Here's an example from the docs:

Draggable.create("#yourID", {
   type:"rotation",
   throwProps:true,
   snap:function(endValue) {
//this function gets called by ThrowPropsPlugin when the mouse/finger is released and it plots where rotation should normally end and we can alter that value and return a new one instead. This gives us an easy way to apply custom snapping behavior with any logic we want. In this case, we'll just make sure the end value snaps to 90-degree increments but only when the "snap" checkbox is selected.
      return Math.round(endValue / 90) * 90;
   }
});

Is that what you're lookin' for? 

[usheeen 6 Likes (Newbie)]

So I think I need to flesh out my example a bit more...

 

My dragEnd function is actually being called in a separate module. I'm sending an event from Draggable.onDrag and listening for it in this module. So perhaps the latency here is causing the problem, maybe the event is arriving a little too late for me to update the snapping in time.

 

I will put together a codepen shortly.

[usheeen 6 Likes (Newbie)]

Here is the CodePen as promised:

See the Pen LVGOpZ by oisinlavery (@oisinlavery) on CodePen

 

I'm using PubSubJS to handle events between modules.

[Diaco 1,948 Likes (Superhero)]

Hi usheeen 

 

pls try this :

Draggable.create(".page", {
    type: "y",
    throwProps: true,
    onDrag: HeaderModule
});

function HeaderModule() {
   if(this.endY < 0 ){ this.vars.snap = [-100] } else { this.vars.snap = [0] }
};

[usheeen 6 Likes (Newbie)]

Thanks for your help so far, updated with your suggestion:

See the Pen vOLWJe by oisinlavery (@oisinlavery) on CodePen

 

Unfortunately, this doesn't seem to fix it, again the snapping doesn't become active until the next drag.

 

My main goal here is to decouple my main Page Draggable from whatever sub modules it might effect. In a way referencing the HeaderModule in the PageModule goes against this.

 

Also, it would be great if Draggable emitted events rather than having to hook up pub/sub myself. Has this ever been considered?

[Diaco 1,948 Likes (Superhero)]

you should to set snap points before the relese/onDragEnd . 

 

pls use onDrag instead of onDragEnd : 

See the Pen rVxYdO by MAW (@MAW) on CodePen

[OSUblake 9,990 Likes (Superhero)]

That would be a great feature, and I have requested it. Voice your opinion here.

http://greensock.com/forums/topic/11545-event-tween-feature-request/?hl=events#entry47195

 

PubSub must be really slow, here's your demo using an event dispatcher I made.

See the Pen zGrPRr?editors=001 by osublake (@osublake) on CodePen

[usheeen 6 Likes (Newbie)]

Thanks Diaco, evaluating onDrag rather than onDragEnd does the trick. now I can decouple my modules nicely.

 

Original pen updated: 

See the Pen LVGOpZ by oisinlavery (@oisinlavery) on CodePen

 

Blake, I feel like Draggable is so tied to the DOM that emitting events should be added. Do you think I should start a new thread or add to the TweenMax events thread?

[OSUblake 9,990 Likes (Superhero)]

I would just add it to the TweenMax thread since there is already a lot good ideas floating around there. I'm all for some type of pub/sub system, especially for draggables, which for the most part can't be scripted like other tweens. Try making a bunch of Draggable objects throwable, responsive, and resizeable, all while bouncing off of eachother and their bounds without using some type of messaging system. It's pretty hard... trust me.

[usheeen 6 Likes (Newbie)]

When I thought about it I thought this warranted a separate post / feature request, mostly because Draggable depends on the DOM and a Greensock event bus is a broader and larger feature request.

 

http://greensock.com/forums/topic/11717-feature-request-allow-draggable-to-emit-events/