Hypespecific Drag and Drop Enabler

Share your Work
1

HypePuzzle
HypePuzzle.jpg983×685 57.5 KB

Very first attempt for a hypespecific Drag-and-Drop-Enabler

Livelink:
https://www2.aachener-zeitung.de/zva/karlo/test/hype_puzzle/
Hypefile:




–>No custom code required! <-- (For designers … :slight_smile: )

Setup is done via the HTML-Attribute-Panel
/////
The Elements that are exposed to be dragged can have four different data-attributes:

  • data-drag (value -> true)
    … this enables observation. Set it to true otherwise nothing will happen :wink:

  • data-drop (value -> classname)
    Elements with this class will accept the dragged element as a drop

  • data-dropsnap (value -> true)
    dragged elements will snap to the left and top of the droppable element

  • data-dragreverse (value -> true)
    if a dragged element does not end on an droppable element it’ll reverse to its startposition

/////
A droppable Element requires a class corresponding to the data-drop-attribute of the draggable element.

possible data-attribute:

  • data-custombehavior (value -> name of a custombehavior)
    the custombehavior will be executed on successful drop. so here is a hook for some logic … :slight_smile:
    /////

Comments:
The solution relies on intersectionObserver. substitution of older Browsers will require a Polyfill -> not activated yet (an outcommented Polyfilllink is outcommented in the hypeexample).

All areas considered by the Intersection Observer API are rectangles; elements which are irregularly shaped are considered as occupying the smallest rectangle which encloses all of the element’s parts.

Please ensure that draggable and droppable elements share a same coordinatespace in hype. (do not place them in different groups/symbols with different top/left values …)

dependencies:
@MaxZiebs MutationObserver thx :slight_smile:

HypeDragAndDropEnabler.js (already included: https://github.com/ChrisCavs/bounds.js). You’ll find it within the hypefile

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

Code is actually a mess and i hope it’ll work :slight_smile:

Half day spend with creating this … i’ll switch to drinking beer now :wink:

Bugreports and improvement proposals are welcome

15 Likes
2

Really nice example. Makes me want to update my examples too… will do and I’ll check your code on monday! Groovy work°

3

Nice!
On iPad the screen jumps around.

4

very nice!

+1

5

another example executing the custombehaviors on intersection.

sidenote: a custombehavior is not only invoked on drop, but whenever an intersection of prepared drag- and dropelement occurs.
so an intersection as a result of a timelineanimation or drag without drop will invoke a custombevavior. In this case the name of the custombehavior will be:
DragElementId | dropElementsId

it’s part of the example.

https://www2.aachener-zeitung.de/zva/karlo/test/lightning/

lightning.hype.zip (31.0 KB)
have fun :slight_smile:

4 Likes
6

a very basic usage-example showing the relation of intersection and drop with custom behaviors:
https://www2.aachener-zeitung.de/zva/karlo/test/dragAndDrop_BasicExample/

hypefile:
dragAndDrop_BasicExample.hype.zip (34.0 KB)

////////
BTW: Merry Christmas to the community!
From now on i remain silent for this christmas :wink: i swear …

7 Likes
7

Awesome stuff. The lightbulbs are static on my iPhone (no computer allowed on Christmas) :shushing_face:


2 Likes
8

there is a hand on the left, this should init the lightning ondrop, but it#s not wothin the viewport on mobile .... my bad :ghost: :wink:

9

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.

10

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
11

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.

12

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
13

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:

14

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
15 
       Nicely Done!

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

2 Likes
16

Some great examples here @h_classen! :clap:

1 Like
17

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

2 Likes
18

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!

19

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!

20

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 …