Multiple Drag Items to Drop Targets - Space Between

I have multiple drag items going to drop targets.  Essentially 12 drop items, going to 6 drop targets.  Everything is working wonderfully... but... the drag items butt up against each other in the drop target. (I set Drop Target Options to: Snap dropped items to drop target & Tile.)  Is there a way to set space between the drop items as they are dropped? 

If not, the only option I can think of now is to have my original drag item in each state have a transparent area below the button but that would have to be done in Photoshop and I'd rather stay in Storyline now.

Thank you very much,

Darlene

6 Replies
Emily Ruby

Hello Darlene,

Welcome to the community. Using the tile option will allow the to be up next to each other. You may be able to give the illusion of having a space by adding a large weight border with the color of the drop item. You can add this into a "drop correct" state. 

Attached is a quick example.

Darlene Duffett

Thanks Emily.  I was bringing in jpg images for each state, so adding the outline would not work.  I ended up having to add transparent pixels to the bottom of each image in Photoshop and saved as a png.  I now have the space I need.  I would love to share the file, but I'm working under a NDA.  Maybe I can make one in a few days.  

Do you have any idea how to only allow 2 drag items on a drop target?

https://community.articulate.com/discussions/articulate-storyline/drag-drop-allow-two-items-in-each-drop-target

Thanks so much!

Emily Ruby

Darlene,

Attached is a file where only 2 items can land in a drop target. I added a variable to count how many items land (DropCount) and the when it hits 2, i have another shape appear on top of the target (same shape just added different text to see the change) and this stops any other objects from landing there. You could also change the initial drop target to "hidden" state, but that would be if you want the target to disappear from the screen.

Hope this helps!

And I am sure if there is another way to achieve this, other will chime in as well :)

 

Darlene Duffett

Thank you very much for the example!  I like it, but I really need the drop target not to lock down after 2 items are on it.  Here is what my client is looking for:

1. user drags 'drag1' item to 'targetA' and it sticks

2. user drags 'drag2' item to 'targetA' and it sticks below 'drag1'

3. user drags 'drag3' to 'targetA' , but either item 'drag1' or 'drag2' move back to their original position so that 'drag3' can stay on the 'targetA'.

So it would work just like a drag drop that has "Allow only one item on each drop target." checked.

Thanks so much for all your time!

Darlene