How can I make a drag and drop where object can land on any of 4-8 targets?
Nov 24, 2022
I'm working on an interaction with a drag and drop which I'm very excited about but perhaps too ambitious. I'd like users to drag 8 true and false statements to either of 2 big rectangles (one for true and one for false) with 4 small rectangles inside them. The 4 small rectangles are in a "true group" or a "false group". It's meant to look like a pickleball court (see screenshot). I'd like the 8 statements (in small rectangles the size of the target ones I mentioned above) to be able to be dragged to any small rectangle on either the "true court" or "false court" depending on the answer. I'd like the answers to stay there until the end of the interaction so the user can look them over.
Here is what I did for drag and drop options:
- return item to start point if dropped outside the correct target
- reveal drag items one at a time
- Snap dropped items to drop target in tile form
I thought this would work, but the tiles don't line up properly as you can see in my file.
I'd really love to reproduce an interaction like this for other projects. Would anyone mind having a look at my storyfile and giving me some advice on how I might get the objects to line up nicely in any of the 4 correct targets (not just one target assigned specifically for each object)?