Jump to content
Search Community

Draggable - Cannot read property 'parentNode' of null

Edify Technologies test
Moderator Tag

Recommended Posts

I've been updating a working slider to GSAP 3 ? and am getting this breaking error: Cannot read property 'parentNode' of null. I've created a very simplified codepen where you'll see a working draggable box (for posterity) and one that uses a proxy, which causes the error.

 

Could there be a bug in Draggable.js?

 

The culprit is the updateMatrix() function at matrix = getGlobalMatrix(target.parentNode, true);. My proxy doesn't have a parentNode, so we're passing null here to getGlobalMatrix.

 

If we hop over to matrix.js the getGlobalMatrix(element, inverse) function starts with if (!element.parentNode) { ... }. We're already passing the parentNode as element (which is null in my case), so it seems weird to me to check for a second (grand)parentNode.

 

If it's helpful, the original slider was based on @OSUblake's Draggable Auto Slider which uses a proxy div as a target for the draggable.

 

See the Pen veyxyQ by osublake (@osublake) on CodePen

 

 

 

 

See the Pen JjooNrd by sallf (@sallf) on CodePen

Link to comment
Share on other sites

First of all, thanks so much for creating the reduced test case that makes things so clear, @Edify Technologies! I wish every user was as thoughtful as you. 

 

I have added some code to work around that edge case in the upcoming release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js (just clear your cache and refresh your demo page and it should work). Better? 

  • 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.
×
×
  • Create New...