Drag and Drop Interaction: Drop area visually expands
Apr 28, 2020
I wondered if anyone has a solution for this - I've exhausted my ideas!
I've created a drag and drop interaction with two columns. There are 8 drag items and you have to pick the correct column to drop the items into.
The drop areas have been designed to visually fit 4 items in each column so a learner knows how many to put in each.
Drag items are set to tile so they stack neatly in the drop areas as they're being dropped.
If the learner has stacked 4 items in each column, but decides to reshuffle these, I'd like the visuals to adjust to make this a little more pleasing - I want the drop area to expand slightly at the bottom to fit the temporarily over-stacked drop area.
I had an idea to set each drag item to trigger a hidden expansion to the drop area when they intersect with the hidden shape, and then trigger it to hidden when the intersection ends.
This trigger work as I move the drag item over the hidden area myself, but if I let the drag items stack over it, the object intersect just doesn't seem to work as expected. Is this a limitation of the intersect trigger? Does it not work as an object tiles over another through a drag and drop interaction? Any thoughts on how to get around this?