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)
Here is a version with a generic handler allowing for the following parameter:
data-drop-target
This is a selector for the drop target region (static matter shape)
data-drop-snap-target
If this selector is set and there is a drop target hit success the element will snap to the position of the first element that matches this selector in the scene (top, left)
data-drop-fail-reset
If this is set to a value (like true) the element will snap back to the position the drag started from when a drop fail occurs
data-drop-success-lock
If this is set to a value (like true) this setting remove the ability to drag the element again once it was successfully dropped once
data-drop-success-behavior
This custom behavior is fired on a drop success (meaning if the target is hit)
data-drop-fail-behavior
This custom behavior is fired on a drop fail (meaning if the target is missed)
data-drop-snap-behavior
This custom behavior is fired after the snap complete (meaning after the target moved to the snap target if one is defined)
data-drag-start-behavior
This custom behavior is fired when the drag begins
data-drag-move-behavior
This custom behavior is fired constantly while the drag occurs
data-drag-end-behavior
This custom behavior is fired when the drag ends (despite fail or success)
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)
I am trying to use this hype template but I can't figure out where the additional things are.
How am I able to add a trigger function on "data-drag-move-behavior" and the rest of the additional custom behavior?
data-drop-success-behavior This custom behavior is fired on a drop success (meaning if the target is hit)
data-drop-fail-behavior This custom behavior is fired on a drop fail (meaning if the target is missed)
data-drop-snap-behavior This custom behavior is fired after the snap complete (meaning after the target moved to the snap target if one is defined)
data-drag-start-behavior This custom behavior is fired when the drag begins
data-drag-move-behavior This custom behavior is fired constantly while the drag occurs
data-drag-end-behavior This custom behavior is fired when the drag ends (despite fail or success)
