How I can make a droppable element in Hype3?

hellofedorov · January 20, 2015, 12:24am

Hello everyone! Is there a way to create a droppable element in hype 3 without using jQueryUI?

gasspence · January 20, 2015, 12:51am

You could set an element to Drag in "Action" inspector and select "Control Element Position". When you let the mouse up it would be similar to a drop.
drop.hype.zip (10.4 KB)

strmiska · January 20, 2015, 8:06am

you can drop it, but you cannot i.e. let it count how often without using javascript.
also it can be moved then again.

gasspence · February 7, 2015, 6:29pm

You could also use Hype’s “hypeGesturePhase” to do a drag and drop…

Drag_Drop-hypeGesturePhase.hype.zip (12.7 KB)

kerguelen · February 7, 2015, 6:56pm

Hi Greg,
It works on desktop browser but through Hype Reflect, it shows that action is triggered even if black box is dropped anywhere on screen (and not specifically on red square)

gasspence · February 7, 2015, 7:19pm

Yes, you would have to add some coordinate bounds (X,Y) to the javascript to limit when the timeline action runs. I just wanted to show that Hype does have some drag & drop capability built in.

kerguelen · February 7, 2015, 7:40pm

I get it.
Do you think it could be possible to trigger the timeline by checking wether the black box overlaps the red circle ?

gasspence · February 7, 2015, 8:16pm

Yes, be aware that different screen sizes will need to be considered. My screen size is 1600X900 px. I'm using "getBoundingClientRect" in the javascript, but it may work better if you use "offsetLeft or offsetTop".

here's a sample...

Drag_Drop-hypeGesturePhase1.hype.zip (12.9 KB)

kerguelen · February 7, 2015, 8:30pm

Actually, it doesn’t work on ipad neither on my macbook

hellofedorov · February 7, 2015, 8:41pm

It’s interesting. Thanks!

gasspence · February 7, 2015, 8:43pm

Try adjusting the number in the script —" if (squareRect.left >= 987) "— the 987 is the amount of pixels from the left side of my screen in Safari, but your screen size will be different. It can be done, but it is not a very dependable method because of screen sizes are always going to be different.

kerguelen · February 7, 2015, 9:09pm

Thanks Greg,
It works when I make adjustments but you’re right, it’s a very useless method

gasspence · February 7, 2015, 11:30pm

I wouldn't go as far as to say it's useless, it could work very well if you need to measure from the top of a screen.

Here's a demo using 'offset' in the javascript. It gets the distance from the left side of the Hype window not the Browser window (in this demo the Hype window is 600px wide by 400px height).

offset_action.hype.zip (12.4 KB)

kerguelen · February 8, 2015, 6:23am

That’s really interesting !!!

rene · February 8, 2015, 8:22am

There’s a way in javascript to make another element a droppable one.
You would need these:

if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseStart) {}
if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) {}

I build demo from a page from an interactive picturebook app. It’s in the Tumult Hype Gallery and called Noa’s Stars. You can download the document overhere

Take a look at the ‘fDragDrop’ function.

gasspence · February 8, 2015, 6:12pm

Thanks Rene, nice job on the Noa's Star project.

kerguelen · February 8, 2015, 7:28pm

Thanks René, I get it now !!

rene · February 8, 2015, 7:57pm

You’re welcome guys! I’m working on another interactive picturebook right now. Also with a drag&drop page. I’ll upload it here when it’s finished.

rene · February 11, 2015, 1:23pm

And here’s another page to play with drag&drop!
Kokeshi

Grab the Hype document overhere

kokeshi.hype.zip (6.9 MB)

h_classen · February 11, 2015, 2:09pm

really nice !

Hans-Gerd Claßen