Target object is not hidden on drag and drop in HTML5

Dec 07, 2013

While creating drag and drop, the target object is not hidden, my condition is, i want only one button to be dropped on the object, so the second button is dropped again in object. but it is not hiding, so the second button also dropping into the object.

Its is not working only in HTML5, but working fine in other versions.

I installed latest version(update 4), but still the object hidden state is not working in HTML5.

I have attached the story file here.


7 Replies
Ashley Terwilliger-Pollard

Hi Hari and welcome to Heroes! 

Thanks for sharing the published version here, when testing the HTML5 version in Google Chrome, the drop target is hidden after dropping one item into the drop target. Were you looking for a different behavior? If so, can you share the .story file here with us so that I can look at the triggers you've set up, and let me know a bit more about what you'd like to have happen? 

Becky Lane

We are having a similar issue that is being illustrated in Hari's file. After dropping the first object on a drop target, we hide that drop target so as to disable it and not allow further items to be dropped on it. This is working perfectly in the flash "story.html" version, but does not work in the HTML5 version.

Here is the scenario (using Hari's file to explain the behavior):

  • Drag the teal rectangle into the blue drop target
  • Both disappear
  • Drag the orange rectangle to the area of the page that previously had the blue drop target
  • The orange rectangle disappears

The expected behavior would be that the orange rectangle would not disappear because the drop target is no longer there. If you test this scenario in Hari's "story.html" file it works as expected.

So I guess the big question is, how can we disable a drop target after the first object is dropped on it? I have also tried changing the state to "disabled" but this doesn't work in either version.

Ashley Terwilliger-Pollard

Hi Becky,

Thanks for providing the detail in terms of how you set it up. Without seeing Hari's .story file, I wasn't certain the triggers and such - but the element that you'd like to select as a part of your "Drag and Drop" is that you only allow one drag item can be dropped in the drop target. This is a check box on the right hand side - when you set that up, the second item will no longer change its state.  Even though you've "hidden" the target, it's still a viable drop location. 

I attached a sample .story file here for you. 

Jimmy yau

Just try on Storyline 2, the above case we cannot use the Hidden state, it is BAD on HTML5 Storyline output. We have to do some trick - Use "Disable" state instead of Hidden state:

1. Click your drop object, Edit states

2. Create the "Disable" state for your drop object

3. Inside your newly created Disable state, remove everything!

4. Change your original trigger from "Hidden" to "Disable"

Looking forwards that anyone would find this helpful =]

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