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 function. You just need to add identifying markers to your objects and attach the drag controller, then everything else is handled automatically. This lets you write your entire game logic in one central place that gets triggered at scene load, making it dead simple for vibe coders to create drag-and-drop games without wrestling with scattered event handlers
Here is a simple example:
HypeDragController-Simple-Example.hype.zip (27,8 KB)