Drag one element to another element to change scene

Tips & Tricks
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