Drag and Drop Issue

Sep 25, 2015

Hello everyone, 

I am trying to set up a customized drag & drop interaction. The drop target is a picture that should change into another picture according to the drag item that will be dropped on it. The initial drop target is a picture with a man wearing a white dress. The drag items are a hairnet, a pair of gloves, a coat and a surgical mask. Now I'd like to create some sort of dependencies meaning that if the user chooses to drag the coat first, the basic picture should change into a picture of the same man wearing a coat. If he chooses the gloves first, a picture with the man wearing gloves should come up. The issue here is that I'd like to create something "bottom-up". If I choose to drag the coat first, the picture with the man wearing the coat should be displayed. If I choose the gloves afterwards, I'd like the picture with the man wearing a coat AND gloves to pop up (this goes on until all four drag items have been dropped). Of course this should work the other way around as well (first gloves and then coat). As I have four drag items there are several combinations that I will need to consider. I don't know how to set this up. Anyone has an idea? 

Thanks in advance. 

5 Replies
Daniel Sposato (Philly)

Best way I can imagine is to use 4 variables to indicate if a particular item has been dropped. Set them all initially equal to 0:

  1. Coat_Drag = 0
  2. Hairnet_Drag = 0
  3. Gloves_Drag = 0
  4. Mask_Drag = 0

Put all of your image versions of the picture of the man into states with state names that describe what he's wearing.

Then put your 4 drag items in place, name them appropriately (naming is extremely important) and then convert the slide to a free-form D&D.

Set the general D&D options up the way you want it to work in the "Form" view and then you can add the detailed triggers for checking:

Example: (multiple triggers for each drop)

First Hide the drag so that it goes away.

Next, Change the state of "drop-Man" to the appropriate state depending on what the variables equal. Set up the possibilities in relation to the variables using the "On Conditions" section.

After making all the variable value possibility triggers the last one you would need is one to add 1 to the vale of the variable related to the drag object. I attached the SL2 file I started messing with that these screen captures are from. It's not complete but it will give you an idea.

Alternatively, it would probably be a little less work to check for what state "drop-Man" is on. Everything would be the same except your conditions would check for object  state instead of variable values in the "On Condition" section.

Let me know if this is making sense to you.

Daniel Sposato (Philly)

That's a great idea too Walt. I imagine that method would only give you an issue if say the man was holding the gloves up in front of the coat or some other instance where the items might overlap in a picture. I was imagining that these were actual pictures of a man wearing the different combinations.

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