Drag one element to another element to change scene

(Mark Hunte) #1

I keep seeing questions about dragging an element onto another element to do things like change scene.

Here is a quick and simple example to show how you can achieve this.
The original code comes from a Tumult Tutorial about dragging and controlling timelines which I always struggle to find.
But have the link at home. @Daniel I think it was one of yours ( warmer - colder )

Updated with these images:
You have to drag into the borders of a button. The margin for detection is small. Which can be adjusted in the code as needed

dragToHidenScene.hype 2.zip (46.9 KB)

( Done in hype 2.5 )
( I will probably improve the example later as I am constrained for time right now and this is taken from some of my existing pages. )

Can an object reaching the end of a maze trigger next scene
Drag and drop ball to perform an action: Create a hole for a ball
#2

I’m not sure if I get this right. I opened the scene in H3 pro and preview it in Safari. But there is no action when I drag the bubbles? Where should the bubbles be dropped? Or is it only working in H2.5?

Thanks for sharing the example though.

(Mark Hunte) #3

@Olav
See update… You drag the Bubble to and inside the borders of Page 1 and 2 buttons. This should work on v3

#4

Yes, nice one!
This works great.
Thanks again.

#5

Hi @MarkHunte

I used your code for a turning dial knob. On every 45 degrees I want it to stop and show a button. So it’s kind of a circulair menu. I already played with a Greensocks jQuery option, but it didn’t bring me where I want to be.Lack of coding experience I guess :blush:

So with your code I made a new version. i works kind of, but not completely like it should. On turning the dial I switch to a new scene where the button shows up. I use invisible dropzones. From that point it should turn to the next stop (scene) with another button and so forth.
Something is not working good yet. Any clues?
I attach my testscene on this.

turningknob.hype.zip (34.3 KB)

(Mark Hunte) #6

I think the problem is how the control timeline works. You can only drag in the Horizontal or in the vertical. Not Both.

You may want to look at :

Rotate on path or only rotate on drag?
#7

Thanks for the suggestion, but I’m afraid that example won’t help me with the actions I want to use on the 45 degree stops. I was hoping that by dragging the dial over certain dropzones this could be configured.

Anyway, thanks for your help and hopefully I didn’t hijack your thread too much… :smile:

(Mark Hunte) #8

@Olav,

I am pretty sure you can…

dialTestMH.hypetemplate.zip (96.5 KB)

#9

That’s amazing Mark! Thank you very much!!
I’m trying hard to improve my JS skills, so I can figure this out myself.
Thanks again, much appreciated!

(Lucky) #10

Neat! Here’s another way to approach a basic drag and drop using MDN’s hittest formula, i kind of stopped using the built in draggable function since i found event.pageX ,Y :stuck_out_tongue: A lot more basic than yours, but for basic drag and drop to do action ads it works lovely

basicdrag.zip (227.8 KB)