PS: This is about the detection and works with multiple irregular shapes by setting them to a static physics object. This technique is pretty simple and works very well as is and the above example is mainly there to demonstrate the function hypeDocument.queryIntersections this detection is based on.
Update (2021/April): In this thread there is also now a generic handler version with source see:
This idea will undergo another rewrite soon. Meanwhile also check a similar idea without using a dynamic Physics object I recently posted here (only needs static objects):
And also make sure to check out the great drag’n’drop enabler by Hans. It uses modern approaches and the intersection observer API. As the latter is still not supported in Safari you do need a polyfill but it’s the faster technology and is the future specially when browser support is complete.
That said, the challenge of this thread is the focus on the Matter.js engine and to find a solution that works with odd shapes (made with the vector tool) using the built-in capabilities of Hype. Also, I’ll hopefully be digging into some other collision detection features that go beyond simple overlapping.
There is a better way mentioned in the previous post and it is now merged with this thread. The initial source file had a subtle flaw, if you check cautiously you had realized that the initial code didn't fire if the drop didn't hit on an edge. So, I reworked the approach favoring the following:
Update: I fixed this thread to work with the new approach … so you're safe to use it. As it uses static physics elements, please check the above linked thread if you want to remove those elements from the usual physics' engine collisions (see hypeDocument.disablePhysicsCollisions)
added the possibility to trigger multiple custom behaviors
Just define multiple custom behavior in a comma separated list (white spaces are trimmed)
multiple collision targets can be defined using a single selector
if you set data-drop-snap-target to dropzone each element with the class dropzone will be tested against, not only giving you irregular shapes but also multiple shapes as targets/triggers.
collision is ignored if the trigger is hidden (or nested in a hidden group)
collision is ignored if collision target is hidden (or nested in a hidden group)
Here is another version that also detects intersection start and end. It also provides function callbacks mixed in with custom behavior. Some data attributes have been refactored, but you can see them in the example and code. As this is a tweak I am not replacing the version in the first post, for now. But still wanted to post it here for people to use and check out: DropTargetDetectionAndIntersectionUsingMatter.hype.zip (52,3 KB)