Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DraggableSock

Draggable not working with React 16.5

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

First of all, congrats for all stuff GSAP! This is a wonderful piece of work!

Secondly, I've encountered issues with Draggable, while using React 16.5:
Using Draggable.create(target) doesn't allow the user to drag the element at all. A 3d transform is set on the element, having all 0px values, but the element itself doesn't move.
The onDrag / onDragEnd / onDragStart handlers aren't called. On the other hand, the onPress handler is called, but two times every click, once with a PointerEvent type event payload, and with a MouseEvent, the second time.


Also, it's important to point out that using GSAP 1.19.1 / 2.0.0 / 2.0.2 with React 16.4 and lower doesn't reproduce the issue, nor does it cause the onPress handler to be called twice. It only gets called once, with a PointerEvent.
However, I was able to reproduce this issue using GSAP 1.19.1 / 2.0.0 / 2.0.2, with React 16.5.

If there's anything more needed, I'll happily provide more details.
 

  componentDidMount() {
    const lis = document.getElementsByTagName('li');

    Draggable.create(lis, { 
      cursor: 'grab',
      onPress(event) { console.log(event); },
      onDragEnd() { 
        TweenMax.to(this.target, 0.5, { x: 0, y: 0 }); 
      } 
    });
  }


Thanks in advance!

Link to post
Share on other sites

Yeah, sorry, it's actually a problem that was introduced in React 16.5 because they added an onclick handler on the root element, thus Draggable is trying to respect that as a "clickable" element (so not draggable). The fix should be as easy as adding this to your Draggable:

 

dragClickables:true

 

We're planning to make that the default in the next release of Draggable anyway, FYI. 

 

Does that help? 

 

  • Like 4
Link to post
Share on other sites

Well, Jack beat me to it :D

 

Here's the reason:

 

Happy Tweening!!

  • Like 3
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×