Hypespecific Drag and Drop Enabler

Quiz1 Kopie.hype.zip (2.1 MB)

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


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

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

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

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. :yum:

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? -> https://tumult.com/hype/documentation/#behaviors

what and where is explained in this post:


thank you very much i will try :+1:

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! :slight_smile:


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 :slight_smile:

Thanks for the quick response!

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

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! :slight_smile:


jzdpuzzle.hype.zip (883.5 KB)

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 :slight_smile:

well, if it previews ok, “online” should be ok too :slight_smile:
Here’s my test … works on my machines: https://www2.aachener-zeitung.de/zva/karlo/test/jzdpuzzle/

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

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.
Works on iPad, but no sound.
Works on Phone, but no sound.

Happy to move on if you’re tired of this :slight_smile:


i did not add the sound … :slight_smile: 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 …

Thanks Hans

Here’s what happens when I upload your fix to https://joezeff.design/jzdpuzzle_hans and view in Safari. Again, it works fine previewing from Hype on the desktop. :-?

you may attach the hypedocument itself … i’ll have a look then . …

Yup. It’s the same one you sent me :slight_smile:
jzdpuzzle_hans.hype.zip (859.5 KB)

though there was a difference as the dragNDrop-script was two times referenced in the head and one of the script tags in the wrong position … and did not work for me too :slight_smile: Anyway the attached has the patch i’ve done. and works fine here … Hope it’ll work :slight_smile:

jzdpuzzle_hans.hype_.zip (860.0 KB) now the right file :wink:

Uploaded here: https://joezeff.design/jzdpuzzle_hans-2/

Doesn’t work in Safari still.

Not your problem.



1 Like

Hans, many thanks to you and to @johnapurdy for helping me get this over the finish line! :slight_smile:


Hello Hans, I was delighted to discover your drag and drop enabler as it helped me to solve a problem I’d been thinking about for a while. In fact, I built the tool I wanted based on your script and it works perfectly. Except that I cannot get it to work properly once I embed in in one of my web pages.
I works in preview and the generated html file also works fine. But once embedded it works erratically, slowly or not at all (depending also on the browser). You can see the generated html file here . This works fine. (Just to explain: four sentences of a paragraph are given and the user has to place them in the correct order - feedback is given for each sentence once all the drops are made). You can see the embedded version here. In this version I can see in the console that when I drag, the source intersection, custombehaviorNameToTrigger is not always correct and the drop is difficult to trigger, even when I see in the console that the custombehaviorNameToTrigger is correct.
I’ve tried stripping out as much as possible from the webpage to see what might be interfering with this but to no effect; only the vanilla generated html page works. I’d be really grateful if you could suggest where I might be going wrong. DDSentenceOrder.zip (208.7 KB)
Also, If I can get it to work, can I use this script indefinitely and how do I acknowledge it?
Many thanks,