Hypespecific Drag and Drop Enabler

Perfect as usual. Thank you!

1 Like

Such a fantastic Drag and Drop resource Hans has made!

One little issue that I am having that I cant figure out.

I have an "On solved" custom behaviour that does something when the puzzle is solved. It works great. The problem I am having is that if I have two draggables that can be dropped in the same drop zone my "On solved" stops working.

For instance with my draggable selected, if I change my data-drop value to "drop1 | drop4" to activate two drop zones the problem occurs.

I have attached a sample that illustrates the issue.

(not related, but in the sample, when I go back to scene 1 the drag and drop fires "solved" after only one drop. Not resetting completely?)

Thank you!
drag_test.zip (129.0 KB)

You are right, it's a puzzle-solved function and multiple Dropzones are not yet supported for this puzzlesolved behavior. I'm on holiday until next week so i can't have a look. As a workaround i would guess that you can use two identical dropzones for those to enable the puzzlesolved again :smiley: the second dropzone could have opacity of zero. Just a unique placeholder ...

1 Like

Ah, perfect, thanks Hans, I will give that a try! Enjoy your holiday!

solved4multipleDrops.hype.zip (71,8 KB)
this should fire solved-behavior-event for puzzles with multiple dropzones correct ... -> fires when every dropfield is populated

1 Like

Beautiful. It works perfectly Hans! I can't thank you enough.

Dang, seems like a bit of a gotcha with this new one. Before I could have no dropfields for some dragables and "solved" would fire when the existing dropfields were populated. Now "solved" doesn't fire unless each draggable has a field to populate. Any ideas? Cheers

that's true, each drag element needs a droptarget ... will fire when every droptarget is populated ... that's just how it works ...

Rats! I was able to do this with the (HypeDragAndDropEnabler) and (intersection-observer) js files from 2020. Of course the multiple drop zone doesn't work with these older ones, which I need too. It is desirable to drag elements that don't drop anywhere in some cases, yeah? See what I mean in this sample using the 2020 .js

dropzone_removed.zip (75.5 KB)

I need to figure out a way to have both features.

I did find a simple work around. Just put the transparent drop zone under the drag element. Doh! But you have to click on it to activate the drop so that is not going to help.