How to troubleshoot a Hit Test error in Draggable.js

[solomania9]

This chunk of code was working great in one JS file, but now I'm using the code in another project and it's giving me this error in Chrome:

Draggable.js:2186 Uncaught TypeError: _unwrapElement(...).getBoundingClientRect is not a function

 

The line in my code that's triggering the error is the line below, "if (this.hitTest..."

function onDrag() {
    G.hitting = null;
    tile.positioned = false;
    for (var i = 0; i < G.tiles.length; i++) {
        if (this.hitTest(G.tiles[i], G.dragThreshhold)) {
            G.hitting = i;
        }
    }
    console.log("currently hitting "+G.hitting);
}

How do I go about troubleshooting this? I'm sure the error isn't actually in Draggable.js, but instead it has something to do with how my code is set up. FWIW, the code chunk in the broken page is identical to the code in the working page.

 

I've tried changing the order the JS scrips that are being loaded on the page, but no luck.

 

What are some other things I can try to troubleshoot this?

 

[GreenSock]

Sounds like G.tiles is spitting back something that's not valid. Are you sure it's a DOM element? Maybe add a console.log(G.tiles) just above that line to see what's being returned. Tough to troubleshoot blind - if you provide a reduced test case in codepen, we'd be happy to take a peek. 

[solomania9]

Thank you! You're right; G.tiles was returning something unexpected because I'd modified that code elsewhere.

 

Very helpful - I should have thoroughly investigated all the variables a little more. Lesson learned. Thanks again!