Drag and Drop Interaction: Drop area visually expands

Apr 28, 2020

Hello everyone,

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?

Many thanks!

6 Replies
Euan Hill

Hi Walt,

I've uploaded a very basic demo file to review so you can see if this is the kind of thing you were expecting - this is what I was after! I've only designed it to adapt to one extra drag item being dropped in, but you could quite easily expand it to more.

I've attached the .story file if you'd like to know how it works.

All the best,

Euan.

This discussion is closed. You can start a new discussion or contact Articulate Support.