Query in drag and drop interaction


I'm building a drag and drop interaction in Storyline, but am unable to get the desired output.

Here's what I did:

There are objects that come one by one and the user is asked to drag and drop the items in the correct drop zone. In the drop target options, I selected the "Tile" option.

Here's the screenshot of what happened when I published the output.

In the screenshot, the red boxes are the drop targets/zones and the small images are the drag objects.

Ideally, these objects should appear within the red boxes, and should be neatly stacked along side each other. However, that's not happening and the objects are being placed randomly all across the screen.

Also, after an object has been placed correctly, it should not move around. However, when I drag another object on top of it, the correctly dropped objects also move around.

Does anyone have any suggestions on what I might be doing wrong, or how to fix this?

I'd be greatly thankful to receive any kind of help on this.



5 Replies
Christine Hendrickson

Hi Adhir,

First, I have to say that I love the look of this course. Very appealing, nice job! 

In regards to the objects that move around after being placed in the correct spot, are they grouped, by any chance?

It might be easier to figure out what's causing the random placement of the objects if I can see the actual .story file. Are you able to share that file?

Thanks, Adhir!

Adhir Anand

Hi Christine,

Thanks for your response.

The objects are not grouped. However, they do change state once dropped. In the dropped state, the size of the objects isn't the same as it is when they first appear.

I have attached the .story file for your reference.



Adhir Anand

Hi Ole,

I did look into that. But the objects are supposed to appear bigger when they first come on screen and then are supposed to look smaller after correctly dropped. I tried this with the normal state as well, but it was still giving the same error.

I have found a way to get it to work now by creating 10 separate slides for 10 separate single object interactions which gives the illusion that it is the same slide. However, since I'll be using similar instances often, I need to get a proper fix.



Jeremy Heersink

Hi Adhir,

Just a thought without actually trying it myself.  Can you show a picture of the bigger item first, then when the item is hovered over, add the smaller picture without the big state and remove the big item?  This way you can show the big item, but as soon as they go to click and drag, it'll change to a smaller image and that can be the one they drag.  Like I said, I didn't try it myself, but just a thought.