How I can make a droppable element in Hype3?

dragdrop

(kerguelen) #22

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


(René) #23

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


(kerguelen) #24

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


(René) #25

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!


(kerguelen) #26

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


(René) #27

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…


(Kalle) #28

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: http://ktewes.de/faces/faces.html

faces.hype.zip (62.4 KB)


(Kalle) #29

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:

https://www.main-echo.de/freizeit/mami-papi-ich/interaktiv/373_Manga/index.html?_FRAME=64


(Hans-Gerd Claßen) #30

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