Drag one element to another element to change scene

Tips & Tricks
#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. )

1 Like
Drag and drop ball to perform an action: Create a hole for a ball
Can an object reaching the end of a maze trigger next scene
#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.

#3

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

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

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

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

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

2 Likes
#11

Hi Luckyde,
I tried to use your JavaScript for my project but didn't work. I'm trying to put an element (a Boy) over another element (GreenRectangle) to start a timeline. Can you help me?

Thanks,

Drag_and_start_timeline.hype.zip (222.3 KB)

Screen Shot 2020-10-24 at 11.36.40 AM
Screen Shot 2020-10-24 at 11.36.40 AM2322×1292 371 KB

#12

Note that the name of element is not the same as its Unique Element ID. These IDs are what link elements in your Hype document to something you can access in JavaScript.

Your untitledFunction() script references boy, Boy, and GreenRectangle. To get this to work you will need to:

  1. Select the "Boy" element and go to the Identity Inspector. For the Unique Element ID, type in lowercase: boy.
  2. Select the "GreenRectangle" element and type in the camel case GreenRectangle for the Unique Element ID.
  3. In your code, change line 60 which references the uppercase Boy to the lowercase boy:
    checker(Boy,GreenRectangle)
    Becomes:
    checker(boy,GreenRectangle)

Then the script will work!

Note that JavaScript automatically turns IDs into global variables, which is why this works. However valid names for IDs may not all be able to be represented by variable names. Therefore when working with code, it is recommended that you use a method to fetch the ID. In JavaScript this is typically document.getElementById() but Hype provides one that scopes more properly to the Hype animation on the page. Therefore at the top of the function you could use something like:

var boy = hypeDocument.getElementById("boy");
var GreenRectangle = hypeDocument.getElementById("GreenRectangle");

This isn't strictly necessary, but good programming practice to avoid using commonly named global variables that may conflict with other parts of the page and allow for better naming in JavaScript if you so choose.

1 Like
#13

Thank you!

Drag and Drop - Start Timeline

1 Like
#14

@jonathan

I had a little problem after. When I use the scale option, the drag and drop doesn't work.

problem_with_drag_and_drop_code

#15

At a glance the code itself is messing with CSS that Hype is probably also trying to alter in its own way by the flexible layout system.

I'd say the more compatible and current best practice way to do this is to use the Hype Drag and Drop Enabler created by @h_classen:

This is much simpler to use and does not require any code on your part. I tested with your simple grouping/flexible layout as shown in the video and it appeared to work just fine for me.

The steps to convert over to using this are:

  1. Drag in the HypeDragAndDropEnabler.js file into the Resources Library and uncheck "Include in Document <head>"
  2. Copy this code to the Head HTML (via the button in the Document Inspector):
    <!-- script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script -->
<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeMutationObserver@1.1/HypeMutationObserver.min.js"></script>
<script type="text/javascript" src="${resourcesFolderName}/HypeDragAndDropEnabler.js"></script>
  3. For the Boy, change the On Drag action to simply be "Control Element Position"
  4. In the Identity Inspector, add these Additional HTML Attributes to the Boy:
    data-drag : true
    data-drop : GreenRectangle
    data-dropsnap : true (optional)
    data-dragreverse : true (optional)
  5. In the Identity Inspector, give the GreenRectangle a Class Name of GreenRectangle
  6. In the Identity Inspector, add this Additional HTML Attributes to the GreenRectangle:
    data-custombehavior : boylanded
  7. In the Scene Inspector, click "Add New Behavior" to create a custom behavior. Give it the name from step 6 of "boylanded" and add an action to Start Timeline with your "Excellent" timeline

I've included the document used for the steps here:
Drag_and_start_timeline-fixed.hype.zip (232.3 KB)

1 Like
#16

or keep it all in a hypespecific environment: Drop target detection using physics engine (Matter.js, Drag & Drop)

#17

and this has been a newer version of the setup shown above by @jonathan: Hypespecific Drag and Drop Enabler

1 Like