Jump to content
GreenSock

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

Using Draggable from Outside.

Go to solution Solved by iDad5,

Recommended Posts

You missed reading all the boring stuff I write. Or the sense I tried to give my convoluted sentences.

 

In a CodePen both work

on my server new Draggable   throws the errors consistently, while Draggable.create() does not.

The only reason I can imagine is, that jQuery or GSAP have minimal differences in Versions. Still the fact alone makes me wonder.

 

The code I wrote surely smells like bad scope trouble, but I would guess that as Dragabble.create() calls new Draggable  if one of them would run into scoping problems it would be the first...

 
I'm really at a loss there, but as the problem seems to be so specific and is only triggered by code that I won't use any longer and probably never again I'm grudgingly willing to let the mystery go unsolved. Thank you for your time and afford. 

 

Link to comment
Share on other sites

2 minutes ago, iDad5 said:

You missed reading all the boring stuff I write

We've read it :) but given we (and you) can't reproduce it in isolation, it's not just an issue with new Draggable vs Draggable.create(). Because something else in your project is affecting it. So if you want to figure out what the issue is you've got to figure out which part of your project is affecting it.

Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

given we (and you) can't reproduce it in isolation, it's not just an issue with new Draggable vs Draggable.create()

well you are certainly entitled to that view. I still don't understand why two setups on my server wouldn't qualify as "reproduce[able] in isolation". I stripped it down to 22 lines of TypeScript, eliminated jQuery and reduced the HTML to a bare minimum. I load two style-sheets locally and 3 scrips (gsap, daraggable, and my 22 lines). Still the problem persists.

It seems obvious that there is some problem with scoping.

 

The environment on CodePen is much more complex and it seems plausible to me that they have taken various precautions to even things out.

I'm not at all saying that there ist a bug in Draggable, or that that issue is of importance. But it is very much reproduceable in a regualr working/publishing/target - environment even if not on CodePen.

But: Whatever! It was fun investigating with you, and there is - if at all only my intellectual chalence to worry about.
 

THX

Link to comment
Share on other sites

Yeah, I'm quite curious too - once you can give us a minimal demo that shows the error being thrown with new Draggable but not with Draggable.create(), I'm sure we'll be able to figure out what's going on. I still wonder if it boils down to your code not accounting for the fact that Draggable.create() returns an Array whereas new Draggable() doesn't. 

 

I also can't imagine it'd be a scope issue, but it's hard to say without seeing your code. 

 

I'm also VERY confident it has nothing to do with CodePen somehow doing something fancy to guard against a condition that's triggering your problem. 

 

Just so I'm clear - you're saying that you cannot reproduce a minimal demo, right? CodePen is the most convenient, but it doesn't have to be there. Even if you have a tiny Github repo or something with only the essential code to reproduce the issue, we'd be glad to look at that. 

  • Like 1
Link to comment
Share on other sites

I just glanced at your code on your server and noticed that you never applied one of my original suggestions - make sure you gsap.registerPlugin(Draggable) before you ever try using Draggable. Can you please add that to your demo and see if it works? 

Link to comment
Share on other sites

6 hours ago, GreenSock said:

I just glanced at your code on your server and noticed that you never applied one of my original suggestions - make sure you gsap.registerPlugin(Draggable) before you ever try using Draggable. Can you please add that to your demo and see if it works? 

 That is not exactly true I had it in for quite a while but it made no difference so I took it out ,  to minimize it to the max  I've thrown it out.
I just put it in again (you can see it on my server) the problem still persists. 

Link to comment
Share on other sites

Ok, I dug a little deeper:

CodePen puts your script not in an external file (found that via the debug view).
So I tried the same with a page on my site and the new Draggable Line - and it worked. (https://dev.thewebworks.de/debug/inline.php)


I run all code on DOMContentLoaded regardless of the placement of the script. I switched temporarily  to window and the load event to see if that makes a difference - it did not.

Here is the (transpiled) code I'm currently using:

 

gsap.registerPlugin(Draggable);
document.addEventListener("DOMContentLoaded"ini);
function ini() {
    new WalkPoemB();
}
class WalkPoemB {
    constructor() {
        this.react2VolumeHandleMove = () => {
            console.log(':::');
        };
        this.initVolumeControls();
    }
    initVolumeControls() {
        let parent = document.getElementById('vTrack');
        new Draggable('#walk-volume-handle', { type: 'y'bounds: parentonDrag: this.react2VolumeHandleMove });
    }
 

 

It does work if placed in an in line script tag at the end of the HTML.

It does not work if loaded from an external file in the head of the HTML.

But it does work if loaded from file when I replace new Draggable  in the last line with Dragabble.create().

 

 

Link to comment
Share on other sites

6 hours ago, iDad5 said:

It does not work if loaded from an external file in the head of the HTML.

But it does work if loaded from file when I replace new Draggable  in the last line with Dragabble.create().

Thank you. I am able to reproduce the issue now @GreenSock:

 

test.html:

<html>
<head>
<script src="./test.js"></script>
</head>
<body>

<h1>Test</h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/Draggable.min.js"></script>
</body>
</html>

test.js:

document.addEventListener("DOMContentLoaded", function() {
    gsap.registerPlugin(Draggable);

    new Draggable('h1'); // Works
    // Dragabble.create('h1'); // Breaks
});

 

Link to comment
Share on other sites

Have you confused the two lines or is it actually the case that for you new Draggable works and Dragabble.create() doesn't?

 

In my case it vas vice versa.

Link to comment
Share on other sites

You're welcome to test the minimal demos that I created. They fully reproduce the issue in a minimal form.

Link to comment
Share on other sites

I did spend the time to do so.

Add I ask agian: 

53 minutes ago, iDad5 said:

Have you confused the two lines or is it actually the case that for you new Draggable works and Dragabble.create() doesn't?

 

Because Your minimalistic example in my Environment does exactly like my experiments it works with Dragabble.create() ist does not with new Dagabble.

 

Correction: 
Now I got the same results as you with your example. (Will check if my first outcome was due to wrong reloading or if it is just not consistent.)

 

Furthermore I tried a variant with inline script and it did behave the same as with the external js-file. Which is also a deviation from my problem. In my case both variants worked with inline script.

As I see it your minimisation behaves similar but not the same as my example

Edited by iDad5
Correction
Link to comment
Share on other sites

No, I have not confused them. I ran them with local files on my Windows computer in Chrome.

Link to comment
Share on other sites

2 minutes ago, ZachSaucier said:

No, I have not confused them. I ran them with local files on my Windows computer in Chrome.

Thanks: As stated in my correction and retested now, I have the same outcome as you.

 

So now we have my version and your micro-version behaving the following way:

Zach Version:

external JS : Draggable.create() breaks, new Dragabble works

inline JS : Draggable.create() breaks, new Dragabble works 
 

iDad5 Version:

external JS : Draggable.create() works, new Dragabble breaks

inline JS : Draggable.create() works, new Dragabble works 


correct?
 

Link to comment
Share on other sites

It's a typo in your code:

// BAD
new Dragabble()

// GOOD
new Draggable()

Two "g's", one "b" :)

Link to comment
Share on other sites

Oops, good catch. So we're back to where we started then of not being able to reproduce it.

Link to comment
Share on other sites

Can't you reproduce my problem on my site?
I can send you a zip wit the contents of my debug folder, I'm just hesitant to upload it here, as the club files are part of it....

Link to comment
Share on other sites

Honestly, it's probably not a bug in GSAP and you have a work around already so it's not really too much of our concern. 

Link to comment
Share on other sites

The error on your site points to an attempt to create a Draggable before the window or document.body exists. My guess is that you called gsap.registerPlugin(Draggable) before there was any <body> that existed. Looking at your code, that does seem to be the case. You've got this code that runs ABOVE the <body> tag (so it doesn't exist yet):

gsap.registerPlugin(Draggable);
document.addEventListener("DOMContentLoaded", ini);

If you move that down so that it's after the <body> or inside your ini() method, I bet it'd work. 

 

Like I said originally, the only real difference with Draggable.create() is that it'll attempt to register the plugin if it's not properly registered yet (and in your case, it couldn't properly register because the <body> didn't exist), and then it just loops through the targets and does new Draggable(...) for each. In the next version, I can tweak one line of code in the constructor to better shield against this condition, but it's definitely best to make sure you don't run your code or register the plugin until after there's a <body> that exists. 

 

Mystery solved? 

  • Like 3
Link to comment
Share on other sites

You truly are a (super)hero!

I don't remember that you stated the importance of register.Plugin and its' being the the real difference, but actually it is so logical, that it shan't be on my memory but on my thinking.

That also makes clear why it works as inline code.

If you ever com near Munich I buy you a (real) beer*n (and or or single malt);

  • Thanks 1
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.
×