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 . …
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 Anyway the attached has the patch i've done. and works fine here ... Hope it'll work
jzdpuzzle_hans.hype_.zip (860.0 KB) now the right file 
Uploaded here: https://joezeff.design/jzdpuzzle_hans-2/
Doesn’t work in Safari still.
Not your problem.
THANK YOU SO MUCH FOR YOUR PATIENCE AND GENEROSITY!
Joe
1 Like
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,
Steve
hello Steve,
you've offered a very complex document and it'll be hard to step into. if it works like expected on export, the easiest hint would be to embed it as iframe.
////////////
btw: this has been the last version and as you may see in the description some things changed:
2 Likes
Iframe. Works perfectly. I’m still puzzled as to why it shouldn’t work without that, but you’ve solved my problem and I’m extremely grateful.
Thank you.
Steve
Hi @h_classen, I’ve been religiously following this thread and am so grateful for the work you and everyone else has put towards this endeavour. I’ve run into an issue embedding an iframe that uses this drag-drop feature. Without embedding it works perfectly. When embedded into a larger Hype document, it’ll allow me to drag the elements but the snapping feature doesn’t execute. Something I noticed when importing the iframe was that it didn’t automatically resize the element frame to fit the dimensions of the iframe. Please forgive my inability to express myself. While I have followed these forums for years I still lack the required language register. I would greatly appreciate your time and advice on this. Shape drag drop.zip (1.5 MB)
you should use the widget url instead of some embed code …
so you’ll surely load the required scripts:
IntersectionObserver, HypeMutationObserver, HypeDragAndDropEnabler
Thanks for getting back to me so promptly Hans. I don’t think I’ve done it correctly, I’ve shown what I did in my illustration document. I suspect my sourcing of the widget url to be incorrect. I also separately tried using a parent document with the scripts together with the embedded div. Could it have something to do with competing Javascripts? I have a password validation script running in the same scene…
Shape drag drop Test.zip (2.2 MB)
Steps used for embedding: saved initial HTML5 folder>opened in browser>copied div from web inspector>pasted code into widget in parent doc>saved out parent doc as HTML5 folder>imported initial HTML5 folder’s resources into parent resources folder. This method has worked for all other imports into parent docs I have made in the past…
Thanks again for your time and patience with me Hans.
those scripttags have to be in the head of your embeded iFrame.
my advice would be to just use the url-method hype offers ... that simplyfies things
MergedColours.zip (1.5 MB)
if you need a preview while working in the masterdoc -> load the iFrames from a webserver ...
2 Likes
Brilliant! Hadn’t seen the url-method but the example made it clear. Thanks very much!
Thought I’d share where this went. Useful tool for parents and teachers. alphabet drag.zip (484.7 KB)
4 Likes
Hi Hans,
First up, thank you for sharing this - I can see this being hugely useful for a lot of things.
One question… if you drag and drop beyond the edge of the Hype document, it doesn’t snap the piece back (and indeed the new “reset” location is now where you have dragged to. If you drag beyond the top of the hype canvas then you can get the element to effectively disappear.
How difficult is it to test for the bounds of the hype canvas (or a rectangle placed on the canvas that is the “gameboard”)?
The script uses an event-delegation whose base is the scene. if the drag is beyond the scene it stops receiving events. if the scene is responsive (and there’s no overflow-property hidden involved) it should work …
1 Like
that said …
Hype itsself of course triggers its drag-events. so you can probably just add an additional ondrag-js-function to the dragged element that dispatches a “mouseup”-event (as a guess: additional code for touchend is no necessary).
like:
if(event['hypeGesturePhase'] === hypeDocument.kHypeGesturePhaseEnd){
var mouseUp = document.createEvent("MouseEvents");
mouseUp.initEvent("mouseup", true, true);
element.dispatchEvent(mouseUp);
}
did a short test desktop Safari, chrome, FF, Hype reflect, mobile safari …
3 Likes
Thank you Hans! That did the trick… I added the ondrag to the objects in your examples that you posted and it worked a treat… now if you drag beyond the scene it snaps back.
1 Like
Why all of the resources here which i download can’t snapping when I drop on the place and timeline not running.