How I can make a droppable element in Hype3?

dragdrop
(Artem Fedorov) #1

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

Arrastre sencillo
(Greg) #2

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) #3

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

(Greg) #4

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


Drag_Drop-hypeGesturePhase.hype.zip (12.7 KB)

(kerguelen) #5

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)

(Greg) #6

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) #7

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

(Greg) #8

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) #9

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

(Artem Fedorov) #10

It’s interesting. Thanks! :smile:

(Greg) #11

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) #12

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

(Greg) #13

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) #14

That’s really interesting !!!

(René) #15

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.

(Greg) #17

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

(kerguelen) #18

Thanks René, I get it now !!

(René) #19

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.

(René) #20

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

kokeshi.jpg700x430 89.4 KB

Grab the Hype document overhere

kokeshi.hype.zip (6.9 MB)

Drag and drop code advice
Drag and Drop exercise
Need your Help with Drag n Drop!
At the end of an On Drag Action can a Timeline be triggered?
Drag and Drop question
(Hans-Gerd Claßen) #21

really nice :slight_smile: !

Hans-Gerd Claßen