Hypespecific Drag and Drop Enabler

Hey @h_classen,

I like the concept. Only thing I’d would change is the dependency on bound.js (IntersectionObserver). I might give it a try using another detection like the matter.js based detection (if possible).

Your including all your artwork as PSD. Any reason for that? Are you open sourcing this? Was wondering why the file is so huge.

Regardless nice work.

Hello @MaxZieb,

it comes will full.min and physics.min. counting all up this'll take about 120kb on top. Though, detection-accurance would be better ... :slight_smile:

just a accidental click on the wrong option in the exportscript in PS :slight_smile:

of course anybody can use or modify ....

1 Like

Yes, that is a good point. Bound.js + IntersectionObserver polyfill should be much smaller!
The polyfill will be needed as Safari still doesn't support it. Sadly.

actually i can’t test, but should at least be supported natively in safari since 12.1 (mobile 12.2): https://caniuse.com/#feat=intersectionobserver

1 Like

Ah okay. I was always bundling it with the polyfill but then for some strange reason I got Safari 12 running Mojave. Might need to-do something to get 12.1 although I am being nagged about an update to Catalina by Mac OS and still am hesitant as my laptop is from 2014. :v:

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 ... reverse dragelement if no drop was possible

one special attribute for a puzzle-mode:

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

droppable elements:

data-dropcustombehavior -> name ... of a custumbehavior to execute on drop
data-intersectcustombehavior -> name ... of a custumbehavior to execute on intersection
data-intersectoffcustombehavior -> name ... of a custumbehavior to execute on intersection off

///////////////////////////////////////////////////////
while previewing in the browser you can use the console to check and verify the events and the called custombehaviours:
image

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

please checkout and report issues :slight_smile:

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

@Daniel did a explainvideo on it: https://www.youtube.com/watch?v=bJYgCNTwt0Q

10 Likes
       Nicely Done!

Honking%20Horn%20right Honking%20Horn%20left

2 Likes

Some great examples here @h_classen! :clap:

1 Like

adaption for a special case that requires only one drop at a time and resetting old drops:

2 Likes

Perfect instructions, thank you very much! I have programmed a game in which you have to assign three animals to their tracks. if all are assigned, a text (eg “Bravo !!!”) should appear. Could you tell me how to program that? Thank you so much!

Perfect instructions, thank you very much! I have programmed a game in which you have to assign three animals to their tracks. If all are assigned, a text (eg “Bravo !!!”) should appear. Could you tell me how to program that? Thank you so much!

you can set a data-attribute: “data-onpuzzlesolved” to one of your drag-elements and as value a name of a custombehaviour you like to trigger …

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

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

perhaps you’re expecting another behaviour …

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!

1 Like

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!

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

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

I will try! THx

Quiz1 Kopie.hype.zip (2.1 MB)

Quiz1 Kopie.hype.zip (2.1 MB)

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

2 Likes