[image] Demo: DropTargetDetectionUsingMatter.html Source: DropTargetDetectionUsingMatter.hype.zip Have fun! Should be great for games! 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 wor…

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): [image] Faking Mouse Interaction Using JavaScript with Hype Here is a followup to do intersection ob…

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: …

How can I play a sound when the drag touches the obstacles? Thanks

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 fi…

I just updated the example and download: fixed a bug for convex shapes 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 se…

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 n…

Hi MaxZieb good day! Thanks for all your work! 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 custo…

Sorry for the delay, pretty busy.

Hype
Whisk
Reflect
Store
Support
Forums
Blog
About Us

Tumult Forums

Drop target detection using physics engine (Matter.js, Drag & Drop)

Tips & Tricks

show post in topic

Home
Categories
Guidelines
Terms of Service
Privacy Policy

Powered by Discourse, best viewed with JavaScript enabled

Products

Hype 4
Hype Pro
Whisk
Reflect

Company

About Us
Press
Privacy Policy

Social

Blog
@hypeapp
@TumultWhisk
Facebook
Instagram

Hype Support

Support Portal
Downloads
FAQ
Tutorials
Documentation
Forums

Whisk Support

Support Portal
Downloads
FAQ
Documentation
Forums

Store

Tumult Store
Education Store