Hypespecific Drag and Drop Enabler

Yes, it is appropriate. It turned out to be true. Can't believe I did that actually. Thanks Jonathan!

hi @theron_hp, will this result in a kidsgame or something other? :slight_smile:

hi @h_classen. No. Covid changed a lot of industries and the Horticulture industry in New Zealand is looking to draw more locals from NZ. So this is part of a bigger micro-credential project. I'm actually trying to get my company to consider using Hype as an authoring tool, so after creating an activity in Storyline I wanted them to see what it could have looked like if we did it in Hype. It feels like I'm accessing half my visual vocabulary working in Storyline compared to Hype. 'Templates' like yours and work that @MaxZieb does in the community helps to make the argument stronger. So a big shout-out to the community in general. 'Normal' e-learning authoring tools are 'template' based trying to make the authoring process faster. In my opinion it is misleading, as deciding what and how to do it (planning) takes the most time for me. Especially for me, conceptualising and authoring aren't separate processes, so the tool is pivotal in the final outcome.

Sorry. Had to get it out there. You can send me a counselling bill if you want to.


thx for the detailed explanation and good luck for your project :slight_smile:

Hello everyone. I absolutely love the drag and drop tool. I am trying to create a page where labels for a diagram are dropped into the correct spaces. I would really like it if once an element has been dropped it can longer be dragged anywhere else. I have tried disabling by putting another element over the top but unfortunately any dropped element seems to go on top of this. The only other way I could think of is to disable any further dragging of the element once dropped but I have no idea if this is easily possible. (slowly learning javascript but this is beyond my skills). Any help would be greatly appreciated.labelDiagram.hype.zip (110.5 KB)

Hype offers an API-call to an element to set and get its z-index. so setting this z-index for an blocker-element higher than the drag-element should work.blockWithEl.hype.zip (540.7 KB)


Amazing. That is perfect! Thank you so much for your time in solving this problem.

Hi I'm back again. I am having one issue with the drop() function. I would really like it if any drop on any 'drop element' could be blocked. Currently (unless I'm doing something wrong - highly likely!) the first drop gets blocked but any subsequent drops on other elements are not blocked. My guess is the blockEl variable is only allowing one of the elements to become a 'blocker' as querySelector is only grabbing the first blocker with the class name (I have only very basic javascript knowledge). Any help with this would be great.dragdropblock.hype.zip (16.6 KB)

you'll need to set the classes to your needs ... querySelectorAll to get them on drop and then loop thru to activate the blocks ... the first example is easy to adapt ... give it a try ...

perhaps somebody other steps in to help ...

1 Like

many thanks for this. I'll give it a go. :smile: all sorted - should've figured this out myself!

Adding my thanks to @h_classen for making this remarkable enabler available to us all. It's a gift! :star2:

@Daniel Would you please post (or point me to) the doc you used in your great video? I'm not getting the custom behavior part to work, and am sure I'm just missing something simple I can find there. Thanks in advance!

If you still have Problems please offer a simplyfied hypefile ...

1 Like

Hi Hans-Gerd. For the intersection-part of the droppable elements: The custom behavior is executed only if a matching element intersects, right? Is ist possible to fire the custom behavior on intersection of ANY drag-element (just to show: Oh, here´s a drop-zone...) ?

Lieber Kalle, data-drop muss die Klassen aller dropzonenelemente enthalten. Das heißt das drag element hat jedes dropelement als Ziel -> somit werden auch hier intersections registriert. Damit das vermeintlich korrekte Ziel jetzt identifiziert werden kann, gibst du dem drag element ein weiteres data-attribute -> data-realdrop. Dieses Attribut muss übereinstimmen mit data-dropcustombehavior des richtigen dropelements.

im Script gibt dazu jetzt diese erweiterte Zeile:
if (lastAction.inside && (lastAction.dropTargetEl.dataset.dropcustombehavior === dragTargetEl.dataset.realdrop)) {...

klingt doch einfach, oder :wink:
Beispiel: realDropAndFakeDrop.hype.zip (546.8 KB)

Nicht gut getestet, aber könnte klappen :wink: Behaviour bitte in Browser-Console checken ...

the fileversion in this post is not generally recommended as it's partly mismatching with the original js-logic of the enabler ...

1 Like

Klingt einfach, ist es auch, muss es nur noch in meinem Projekt an den Start kriegen... :grinning: Danke Dir!!

1 Like

ja sry ... Funktionalität ist jetzt anders ... deshalb auch noch der Hinweis von mir in obigem Post ...

Hi there,
providing that I can complete a puzzle with one of the "many" drags of the stage, how can I trigger a custom behaviour when finishing a puzzle? In the lodgy example the drags are on a stack pile so the last one (croco) is triggering the "finish" custom behaviour. But what in a more "open" situation?

data-onpuzzlesolved -> name of a custumbehavior to execute when all possible drops have been done

so this will execute in a simple setup when all possible drops were made ... no matter of the order

however, if you've done a setup where multiple drops or re-drops or whatever heavily customized then you'll need to do the bookkeeping yourself :frowning: