Hypespecific Drag and Drop Enabler

[bassgi]

@h_classen

data-onpuzzlesolved

Thank you for your response! Sorry, my English is not very good. A

nd my knowledge in hype bad. I programmed it as in the 2 pictures, but it doesn't work ...

[h_classen (Hans-Gerd Claßen)]

the custombehaviour should execute if all drags are on the board …

i see four pictures on the screenshot? three answers!?

so, it’s not right clear to me … perhaps providing a hypefile can help

perhaps you’re expecting another behaviour …

[bassgi]

thank you for your help. one of the animals on the left is working on two pictures. therfore 3 animals and 4 pictures. the hype file is to big for sending here…but I think I am near to solve it!

[bassgi]

After hours of work, I’m unfortunately not further. Would it be possible to send you the hype file via we transfer? That would be really nice!

[h_classen (Hans-Gerd Claßen)]

you can paste the link here? cause i don’t support privatly

does not need to be the original document … just a rebuilt for the usecase …

[bassgi]

I will try! THx

[bassgi]

Quiz1 Kopie.hype.zip (2.1 MB)

[h_classen (Hans-Gerd Claßen)]

Quiz1 Kopie.hype.zip (2.1 MB)

you’ve had an outdated script … sry you hit this …

[bassgi]

Oh! Thank you so much!!! What does this mean: an outdated script? Do I have to update the software?

[h_classen (Hans-Gerd Claßen)]

ah no … the dragenabler. latest one’s been the jungleLodge above …

[bassgi]

ok. Once again: thank you very much!!!

[Mijailtov]

Hi, I’m new to Hype and this is doing a drag and drop animation based on your input, but I don’t know how you did the animation of the colored dots when you drop the white point on them, it is possible that you can explain or give me a guide of how I can do it. I would greatly appreciate your help.

P.S. I hope you have explained me well, my English is not very good.

[h_classen (Hans-Gerd Claßen)]

when an event of intersection or drop occurs a custombehaviour is triggered. so you'll have to set up custombehaviours to react somehow.

you know of custombehaviors? -> Tumult Hype Documentation

what and where is explained in this post:

Hypespecific Drag and Drop Enabler

I did an update on the ‘HypeDragAndDropEnabler’. Drag and drop for Hype without touching code … online: https://www2.aachener-zeitung.de/zva/karlo/test/jungle_lodge/ file: jungle_lodge.hype.zip (615.9 KB) configuration within hype -> attributes panel possible attributes: drag-elements: data-drag -> should be true data-drop -> class ... of elements that should allow drop for this element data-dropsnap -> true ... to snap to left and top of droppable element data-dragreverse -> true ... reve…

[Mijailtov]

thank you very much i will try

[joezeffdesign (Joe Zeff)]

Hans, I love this, and wanted to take you up on your generous offer to repurpose and reuse. I’m happy to provide credit. Meanwhile, when I upload to my own website it doesn’t function properly in Safari. It’s here: https://joezeff.design/jzdpuzzle and jzdpuzzle.zip (1.6 MB) .

Any ideas? Thanks for being helpful!

Joe

[h_classen (Hans-Gerd Claßen)]

the technique behind is intersectionobserver . Browser that do not support this need the polyfill. in your case the scripttag for the polyfill is disabled (outcommented). so enable it.

AND please only load the enbaler only once (twice in your doc)
AND then it’s important to load the scripts in the right order:

1. polyfill
2. mutationobserver
3. dragNdrop-enabler

should work

[joezeffdesign (Joe Zeff)]

Thanks for the quick response!

Still no go . . . video attached from https://joezeff.design/jzdpuzzle in Safari.

Any other ideas? It previews fine on my device but not online.

Wish I were smarter about Javascript. Learning a lot, from people like you!

Thanks
Joe

jzdpuzzle.hype.zip (883.5 KB)

[h_classen (Hans-Gerd Claßen)]

EDIT: Did some more testing on mobiles and found that getElementsByTagName("*") does not work on my mobile-safari-browser. whereas querySelectorAll('*') seems to run properly ... .

Did a tmpFix here, please test: jzdpuzzle.hype.zip (856.3 KB)

thx for reporting
////////////////////////////////////////////////////////////////////////////////////////////////////

@joezeffdesign

It previews fine on my device but not online.

well, if it previews ok, "online" should be ok too
Here's my test ... works on my machines: JZD puzzle

so, can you provide a link? are you embedding it? <- if so: be sure the scripts from the head are embedded too

[joezeffdesign (Joe Zeff)]

Hi Hans,

Thanks again for your patience. Learning as we go, and appreciating your help.

On your server the link works fine in Safari. No sound, but drag and drop snaps into place.

The same directory on my server joezeff.design/doesn’t snap or make sounds.

Here’s the actual folder I’m uploading to joezeff.design/jzdpuzzle:

The jzdpuzzle bundle above works on Mac Chrome.
Doesn’t work on Mac Safari — Version 13.1 (15609.1.20.111.8)
Works on iPad, but no sound.
Works on Phone, but no sound.

Happy to move on if you’re tired of this

Thanks
Joe

[h_classen (Hans-Gerd Claßen)]

@joezeffdesign

On your server the link works fine in Safari. No sound, but drag and drop snaps into place.

i did not add the sound ... but anyway there could be situations where a sound does not play without interaction. Just strating a sound from a timeline is "no interaction" ...

///////////////////////////////////////////////

As of your screenshot: you did not load the fixed Library. It's within my last hypefile above. and i named it HypeDragAndDropEnabler_tmpFix.js ...