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

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)

Download:
↑ look at project

2 Likes