How I can make a droppable element in Hype3?

It’s interesting. Thanks! :smile:

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.

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

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). (12.4 KB)

1 Like

That’s really interesting !!!

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.


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

1 Like

Thanks René, I get it now !!

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.


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

Grab the Hype document overhere (6.9 MB)


really nice :slight_smile: !

Hans-Gerd Claßen

Thanks you so much René !!
I guess we can make a test somewhere to avoid piling up dresses/hair by sending a positioned object to its previous position when trying to pile one over it

I was already trying to accomplish that, but my kids love to stack the doll full of dresses… :wink:

Well, sure, but it could come in handy :slight_smile:

I’ve updated the kokeshi drag&drop example.
If there’s already a dress dropped when you try to drop another, the old one will revert to it’s original position. URL are at the same place!

Thanks René
And thanks so much for the commentaries that helps a lot to understand how you programmed it !

1 Like

To autorevert some parts was very easy to set up. But these dresses have timeline to make the dropshadow bigger when you drag it and the hair changes sizes, this made it somehow a bit tricky to make them revert to their original position…

Hei René,
I took your fantastic work and modified it for my needs (actual for our designer´s needs… :slight_smile: Your file was a great inspiration for me.
It´s still in mockup state, but it basically works pretty well, I think. What I tried to do, was to simplify the process of setting up additional items for the drag and drop process. In order to achieve this I replaced your four timelines for each item by code. Furthermore I´m working with just one element per item (no “droppedItem”…)
Have a look here if you like: (62.4 KB)


To make things complete: This is the finished graphic published by one of our customers. Press “Überspringen” to get to the drag&drop part quickly :slight_smile:


the drag’n drop works really smooth on mobile :slight_smile: well done!

1 Like