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
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?
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
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.
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…
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 A lot more basic than yours, but for basic drag and drop to do action ads it works lovely
Your untitledFunction() script references boy, Boy, and GreenRectangle. To get this to work you will need to:
Select the "Boy" element and go to the Identity Inspector. For the Unique Element ID, type in lowercase: boy.
Select the "GreenRectangle" element and type in the camel case GreenRectangle for the Unique Element ID.
In your code, change line 60 which references the uppercase Boy to the lowercase boy:
Then the script will work!
var boy = hypeDocument.getElementById("boy");
var GreenRectangle = hypeDocument.getElementById("GreenRectangle");