I'm trying to make a Drag-n-drop component, using GreenSock API.
Everything has been working this far.
var GSAP = require('libraries/TweenMax.min');
var GSAPdraggable = require('libraries/Draggable.min');
The animation tweens work just fine, but when I try dragging the elements I get the following error message in the browser console (Chrome, EI11 does not show any error messages, but the script still doesn't work):
UncaughtTypeError: Cannot read property 'pageX' of undefined (Draggable.min.js:15)
at Xa (Draggable.min.js:15)
at Function.Ta.hitTest (Draggable.min.js:15)
at Ta.hitTest (Draggable.min.js:14)
at Ta.onDrag (adapt.min.js:5)
at ja (Draggable.min.js:14)
at Array.Za (Draggable.min.js:14)
at Object.P (Draggable.min.js:14)
at Object.h.dispatchEvent (TweenMax.min.js:16)
I tried creating the drag-n-drop exercise on Codepen before transferring it to Adapt, and it worked fine there.
I found a GitHub thread on a similar issue about the "UncaughtTypeError: Cannot read property 'pageX' of undefined"-error here:
But they are talking about that the issue has something to do with a interact.js script, but this script doesn't exist in Adapt, as far as I know, and the error-messages I get doesn’t seem to mention the interact.js, but rather the issues seem to come from Draggable.min.js and adapt.min.js. Maybe there are some conflicting functions in these scripts or something...?
But yeah, the funny thing is that the exercise works fine on Codepen, so either, I'm doing something wrong when transferring the code into the component's scripts or GSAP draggable, just doesn't work with the Adapt framework (which would be sad).
The pen is here:
Any help much appreciated.