Drag and drop states

Oct 10, 2014


Having trouble with modifying the states of my drag and drop activity.

Looking to have this note "stack" under the folder the user drops it on. Although I've set up the state to show it this way, and the triggers to make this action happen, what actually happens is the note disappears.

Anyone willing to take look-see and let me know what I did wrong?

Thanks a milli!

5 Replies
Belen Ferrer

Hey Christina,

I think the problem here is that the position of elements in a State is RELATIVE, not absolute. So, your DroppedCorrect State is triggering, but because the position is several pixels left and down from the "anchor point" (so to speak) of your object, it is displaying off-screen. That's why it disappears. 

To show you what I mean, let me compare what the states look like when I move the Object like I might during Drag and Drop:

Go ahead and Edit your Dropped Correct State and place the top left corner of your sticky-note object on the cross-hair mark, like so:

Now try your Drag and Drop again. I believe that should work -- let me know if it doesn't.

Christina Holloway

Hi Belen,

Thank you so much for getting back to me so quickly. I tried doing what you advised, but it didn't work. Also, I didn't see any cross hair mark appear in the edit state. How do I determine where the anchor point is if I cannot see the cross hair mark for my states?

I tried setting this up similar to this tutorial: http://www.articulate.com/support/storyline/how-to-change-object-states-using-drag-drop-triggers.

Belen Ferrer

Hi Christina,

OK, let's keep trying.

The cross hair is actually hard to see -- I enhanced it in those pictures I posted, but it's actually way more subtle. One thing that can help you find it is to make your background white (just for now), since the mark is a greyish color, much like your current background. Change the background color by going to the Design Tab, like so:

Then, when you open Edit States and go to Drop Correct, you'll see the cross hair mark more easily. The mark will always be at the top left corner of your Normal State shape, so look for it in that area. I also suggest going to 100% zoom, if you're not working in it already, to make the mark bigger:

Alternatively, you could re-create your Dropped Correct State. If you delete your current Dropped Correct State, click on the Normal State (to use that as your starting point), and click to create a new State, the new Dropped Correct State will place your object in the right starting position. From there, do what you need to the shape to make it look right, but don't move the positioning of it (ie: dont drag it to the What? folder).

Christina Holloway

Hi Belen,

Your answer was very helpful -- thank you!

I did as you advised and it did get the drop state to show on the slide. Unfortunately, it didn't show in the manner I wanted it to. I had to add a few more custom states on the folders and triggers. I've attached the proof of concept here in case anyone is interested in using this. 

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