11ty not exciting Javascript (draggydivs.js)

hi, I’m merging the new 11ty template with draggydivs (which is awesome btw!) but the JS is importing but not executing and I’m wondering if there is a special 11ty thing I’m missing when importing JS?

The project lives here :arrow_right: Glitch :・゚✧

2 Likes

Wow, draggydivs is cool!

Anything in the console?

2 Likes

So far no, even when I open inspector in the browser I can see the file. So I’m thinking there is maybe some build magic 11ty is doing with the JS?

Writing build/posts/san-francisco/index.html from ./src/posts/san-francisco.md.
Writing build/posts/taipei/index.html from ./src/posts/taipei.njk.
Writing build/index.html from ./src/index.md.
Writing build/posts/index.html from ./src/posts.md.
Writing build/about/index.html from ./src/about.md.
Copied 2 files / Wrote 5 files in 0.04 seconds (v0.11.1)
Watching…
[Browsersync] Reloading Browsers...

There’s something weird, the <div> somehow became an <article> element…

oh interesting I don’t see that on my end in the console when I click the drag button.

Make sure to enable “Warning” logs in your console.

Humm ok will change that

Ok that the articles are now divs, still no errors on my end which is making this tricky :sweat_smile:

1 Like

Oh, hi! I made draggydivs! A very long time ago!

What appears to be happening is your draggydiv elements don’t have initial top/left positions set - I appear to have left that necessity out of the Readme. One thing you can do is in your posts template loop, add an id={{ post.data.draggydivID }} and in each post’s frontmatter put draggydivID = “one” for example. (I see you copied the CSS over so you have positions for #one through #four there).

I think that’s the missing piece but who knows, I’ve never used it with anything more complex than that static site - it’s the vanilla js version of the draggydivs i uses in make8bitart.com.

4 Likes

Okay I made a remix and did just what I said and it looks like my app’s doctype was set to “!DOCTYPE html5” which is a typo. When I set it to “!DOCTYPE html” it doesn’t work. I have to append ‘+ “px”’ to the end of each setting of the left and top position. Now it works lol - I updated the original JavaScript so you can just copy and paste from here: Glitch :・゚✧

My suggestion above is still useful if you want to set the initial positions, but not necessary for it to work!

4 Likes

Yea! :tada: it works! thank you :smiley:. They are draggable now, next I will work on passing through the initial position like you mentioned.

Also make8bitart.com is delightful.

2 Likes