Drag-and-drop (6 drags, 2 drops, max 3 per drop zone)

Hi everyone,

I'm working on a drag-and-drop interaction and need some guidance on the best way to implement it in Articulate.

Requirements

• There are 6 draggable items and 2 drop targets.
• Each drop target should accept a maximum of 3 draggable items.
• If a user attempts to drag a 4th item into a drop target that already contains 3 items, the item currently being dragged should automatically return to its original position rather than being placed in the drop target.
• The Drop Target option setting should be Tile only.
• The Submit button should remain disabled until all 6 draggable items have been successfully placed into the drop targets (3 items in each target).
• If the user moves any draggable item after all items have been placed, the Submit button should become disabled again until the interaction is completed correctly.
• Once all 6 items are placed correctly in the drop targets, the Submit button should be enabled.

Questions

1. What is the best approach to limit each drop target to only 3 items?
2. How can I return the draggable item to its original position when a drop target is already full?
3. What is the most reliable way to track the number of items in each drop target?
4. How can I enable/disable the Submit button dynamically based on the placement of all draggable items?

Any examples, triggers, variables solutions would be greatly appreciated.

Thanks in advance!