Using Hype Drag Controller with a followup action

[info1 (Korneel Bonte)]

Extension:

Hype Drag Controller

[HypeDragController] A self-contained, physics-agnostic drag-and-drop controller for Tumult Hype. Provides a clean, namespaced API with data-attribute-based target detection and callback support for creating interactive drag-and-drop experiences.

Referenced example:

Hype Drag Controller

This doesn’t contain any fancy detection methods and only works on elements where the drop targets and drag elements are at the same group level. No fancy intersection observers or Matter.js-based detection… (yet) … just basic bounding box calculations, so it doesn’t account for scale transforms. I’ll probably add more sophisticated detection methods down the line, but for the project I used this on, it was totally sufficient. The goal was to unify all the interaction logic into a single functi…

Hi MaxZieb, I will try this as I struggle with scripting!

[info1 (Korneel Bonte)]

Yes!!! Thank you very much

[info1 (Korneel Bonte)]

Hi MaxZieb,

I used your drag and drop. It’s great. If I want an action when object 1 snaps to target 1, what code and where must I put it?

(Action for example arrow sign appears meaning ok, you’ve done it good of play timeline)

And so on for other object 2, 3, …

… could you put your code in red?

Thanks for your time!

function checkCompletion() {
    if (hypeDocument.customData.gameState.correctlyPlaced >= hypeDocument.customData.gameState.totalNeeded) {
        hypeDocument.startTimelineNamed('SceneComplete', hypeDocument.kDirectionForward);
    }
}

hypeDocument.drag.setInteractionMap({
    'object1': {
        correctTarget: 'target1',
        onDrop: function(hypeDocument, draggedElement, event) {
        	const targetElement = event.dropTarget;
            if (targetElement && targetElement.dataset.dropTarget === this.correctTarget) {
                // Use custom snap selector if provided, otherwise snap to the target element
                const snapDestination = this.snapToSelector || targetElement;
                hypeDocument.drag.snapTo(draggedElement, snapDestination);
                hypeDocument.drag.lock(draggedElement);
                hypeDocument.customData.gameState.correctlyPlaced++;
                checkCompletion();
            } else {
                hypeDocument.drag.snapBack(draggedElement); 
            }
        }
    },

    'object2': {
        correctTarget: 'target2',

[MaxZieb (Loves Hype)]

Yeah, you can. I just gave you the drag and set into action map here are different things you can do. I'm just giving you multiple examples. If there are different actions per drop target, then you can do it this way.

hypeDocument.drag.setInteractionMap({
    'object1': {
        correctTarget: 'target1',
        onDrop: function(hypeDocument, draggedElement, event) {
            const targetElement = event.dropTarget;
            if (targetElement && targetElement.dataset.dropTarget === this.correctTarget) {
                const snapDestination = this.snapToSelector || targetElement;
                hypeDocument.drag.snapTo(draggedElement, snapDestination);
                hypeDocument.drag.lock(draggedElement);
                
                // 🔴 ADD YOUR CUSTOM ACTION HERE FOR OBJECT 1
                // Show an element (like an arrow or checkmark)
                var arrow1 = hypeDocument.getElementById('arrow1');
                hypeDocument.setElementProperty(arrow1, 'opacity', 1, 0.5, 'easeinout');
                
                // OR play a timeline
                hypeDocument.startTimelineNamed('Object1Success', hypeDocument.kDirectionForward);
                
                // OR play a sound
                hypeDocument.triggerCustomBehaviorNamed('PlaySuccessSound');
                // 🔴 END OF CUSTOM ACTION
                
                hypeDocument.customData.gameState.correctlyPlaced++;
                checkCompletion();
            } else {
                hypeDocument.drag.snapBack(draggedElement); 
            }
        }
    },

    'object2': {
        correctTarget: 'target2',
        onDrop: function(hypeDocument, draggedElement, event) {
            const targetElement = event.dropTarget;
            if (targetElement && targetElement.dataset.dropTarget === this.correctTarget) {
                hypeDocument.drag.snapTo(draggedElement, targetElement);
                hypeDocument.drag.lock(draggedElement);
                
                // 🔴 CUSTOM ACTION FOR OBJECT 2
                var arrow2 = hypeDocument.getElementById('arrow2');
                hypeDocument.setElementProperty(arrow2, 'opacity', 1, 0.5, 'easeinout');
                hypeDocument.startTimelineNamed('Object2Success', hypeDocument.kDirectionForward);
                // 🔴 END
                
                hypeDocument.customData.gameState.correctlyPlaced++;
                checkCompletion();
            } else {
                hypeDocument.drag.snapBack(draggedElement); 
            }
        }
    }
});

Remove the ones that you don't need or adjust them. This is just example code. For the sound work, you would probably need to add a custom behavior listener (PlaySuccessSound) on the in the scene panel and then use a Play Sound action.

---

Btw, you can also share some file simplified if this is too much code for you already. The community or I can help you.