Jump to content


Draggable not working with React 16.5

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 comment
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:




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


Does that help? 


  • Like 4
Link to comment
Share on other sites

Well, Jack beat me to it :D


Here's the reason:


Happy Tweening!!

  • Like 3
Link to comment
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.