geddski Posted January 29, 2020 Share Posted January 29, 2020 I recently upgraded an app to gsap 3 and found that my Draggable instance never fires its onDragEnd event. The other events (onDragStart and onDrag) fire just fine. I tried onRelease event also and it doesn't fire either. I'm using React 16.12 and found another post about needing to use dragClickables: true option, but that didn't help. In case it's relevant, I'm using: this.draggable.startDrag(originalEvent); to initiate the dragging, as it's a dynamic element that I create rather than one the user touches. Any ideas? Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 29, 2020 Share Posted January 29, 2020 Hey geddski and welcome. Thanks for being a Business Green member - we couldn't do what we do without people like you. Can you please create a reduced demo to exemplify this issue? Maybe on Stackblitz or CodeSandbox? It's hard to help blindly. I can't recreate the error solely from your description as seen in the pen below: See the Pen gObJdXY?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
geddski Posted January 29, 2020 Author Share Posted January 29, 2020 no problem I'll try to recreate it in a codepen. Link to comment Share on other sites More sharing options...
geddski Posted January 29, 2020 Author Share Posted January 29, 2020 I was able to reproduce it here: See the Pen LYEoJeg by geddski (@geddski) on CodePen The onDragEnd event doesn't ever get called. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 29, 2020 Share Posted January 29, 2020 Thanks for the minimal demo! The v3 version does indeed not recognize the mouseup like the v2 version does: See the Pen YzPbJVy?editors=1000 by GreenSock (@GreenSock) on CodePen See the Pen bGNymWr?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
geddski Posted January 29, 2020 Author Share Posted January 29, 2020 I found a workaround in case anyone comes across this thread: I add my own mouseup/touchend event to the copy element, and call draggable.endDrag(originalEvent). Here's an updated example: See the Pen XWJwxEQ by geddski (@geddski) on CodePen 1 Link to comment Share on other sites More sharing options...
GreenSock Posted January 30, 2020 Share Posted January 30, 2020 Ah, the problem was that you were listening for a mouse event in a browser that supports pointer events which are prioritized in Draggable (and the browser). I've made an adjustment to the next release that should resolve this. Demo: See the Pen 90377d50d93801e813f20347c1a2fe13?editors=0010 by GreenSock (@GreenSock) on CodePen A preview of that next release of Draggable can be found at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js Better? 1 Link to comment Share on other sites More sharing options...
geddski Posted January 30, 2020 Author Share Posted January 30, 2020 Ah yeah that is better. Thanks ! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now