GSAP 3.x Error with Draggable Event Binding

[KIDS interactive]

I'm trying to to bind a function on the `drag` Event on `onDragStart`.

On the first firing of "onDragStart" the function isn't binded, but afterwards it works fine.

Do you have any ideas how to solve this problem?

See the Pen dyMBYLb by MaqsYo (@MaqsYo) on CodePen

[_Greg _]

Hi!

You dont need create eventlisteners

You can use just like:

const $el = document.getElementById('drag-me');

let dragInstance = null;

dragInstance = Draggable.create($el, {
  type: 'x,y',
  zIndexBoost: false,
  onDragStart: ()=> document.body.style.backgroundColor = 'pink',
  onDragEnd: ()=>document.body.style.backgroundColor = ''
})[0];

 

[ZachSaucier]

As Nekiy2 implied, GSAP already creates these listeners for you. So you creating listener inside of the listener callback that GSAP gives you is actually creating a new listener each time that you start dragging. That's not good  

[KIDS interactive]

Thanks for your help guys, but i explicit need to create a new listener each time. The main-problem is more complex and the codepen shows just the main-cause.

Anyway for me it is a bug that it wouldn't work on the first time, but always afterwards. Any other ideas how to solve it?

[_Greg _]

2 hours ago, KIDS interactive said:

Thanks for your help guys, but i explicit need to create a new listener each time. The main-problem is more complex and the codepen shows just the main-cause.

Anyway for me it is a bug that it wouldn't work on the first time, but always afterwards. Any other ideas how to solve it?

Can you explain why do you need create listener inside listener callback (you create two listeners for one event)
By the way, Draggable already have listener onDrag, onMove ...  you dont need create it again.

 

I can't imagine why do you need to create listener every time on Drag start. 

[KIDS interactive]

the dragInstance is created from another Class. I couln't modify the creation of the instance. The only thing i can get is the firing of an extra event of dragstart / dragend where the instance of the object is passed.

So i have to bind my drag-listener afterwards.

 

And it works after the second dragStart. Just on the first dragStart it doesn't work.

[ZachSaucier]

Sorry, I am not understanding the situation then. Can you please create a demo that shows the issue that you're having more clearly? As Nekiy2 said, what you're trying to do doesn't make much sense.

[GreenSock]

As a performance optimization, Draggable checks when each onPress occurs to see if there's a drag listener so that (if not) it can skip some expensive logic on every move of the pointer. It looks like you're trying to add a drag even listener WHILE it's dragging (after the onPress), so that check has already happened for that drag. You have several options:

• Listen for the "pressInit" event and add your drag listener there instead. 
• Or just make sure there's an onDrag applied to the Draggable instance when it's initially created (even if the function does nothing). 

[_Greg _]

On 10/2/2020 at 10:45 AM, KIDS interactive said:

dragend where the instance of the object is passed.

let isPassed = false // global variable for detct is instanse is passed
const $el = document.getElementById('drag-me');

let dragInstance = null;

dragInstance = Draggable.create($el, {
  type: 'x,y',
  zIndexBoost: false,
  onDragStart: ()=> isPasses ? document.body.style.backgroundColor = 'pink': false,
  onDragEnd: ()=> isPassed ? document.body.style.backgroundColor = '' : false
})[0];

What about check isPassed and if it passed - do something 
Or you can create public method and check it yourClass.isPassed() // return true/false

[KIDS interactive]

22 hours ago, Nekiy2 said:

What about check isPassed and if it passed - do something 
Or you can create public method and check it yourClass.isPassed() // return true/false

The problem is, that the `onDragStart`, `onDragEnd` and `onDrag` are binded by the class. I can't modify them in any way. I can't modify the Draggable creation.

The only thing i get is the instance of the object, with the dragInstance, on drag-start and on drag end.

---

On 10/2/2020 at 8:18 PM, GreenSock said:

As a performance optimization, Draggable checks when each onPress occurs to see if there's a drag listener so that (if not) it can skip some expensive logic on every move of the pointer. It looks like you're trying to add a drag even listener WHILE it's dragging (after the onPress), so that check has already happened for that drag

Okay i see this point. But why it is working on the second try and afterwards ?

[GreenSock]

On 10/5/2020 at 2:19 AM, KIDS interactive said:

The problem is, that the `onDragStart`, `onDragEnd` and `onDrag` are binded by the class. I can't modify them in any way. I can't modify the Draggable creation.

The only thing i get is the instance of the object, with the dragInstance, on drag-start and on drag end.

---

Okay i see this point. But why it is working on the second try and afterwards ?

That's what I tried to explain here: 

On 10/2/2020 at 1:18 PM, GreenSock said:

Draggable checks when each onPress occurs to see if there's a drag listener so that (if not) it can skip some expensive logic on every move of the pointer. It looks like you're trying to add a drag even listener WHILE it's dragging (after the onPress), so that check has already happened for that drag.

On the first drag, it's adding the listener thus on every subsequent onPress, it passes the internal test of "having an onDrag listener", thus it sets that flag to do the expensive work of dispatching onDrag events for that episode.

[KIDS interactive]

Forget it.. i was to dumb to read correctly. `OnPressInit` helps a lot.
---
Could be closed

[hkadyax]

On 10/8/2020 at 12:53 PM, KIDS interactive said:

Forget it.. i was to dumb to read correctly. `OnPressInit` helps a lot.
---
Could be closed

Thanks for posting your finding. Faced the same issue and was able to resolve it with `onPressInit`