Keeping drag object on top
Oct 23, 2017
I have a drag & drop exercise that let's you build and empty computer by dragging parts to the correct place. It uses a base image of the empty computer that has invisible targets and small images of the parts. When these are dropped onto a target, the dragged image is hidden and a layer containing the installed part is shown. What I would like is to have the dragged image always on top so that the layers with installed parts don't overlay and hide the image when it moves over them. I tried placing the draggable images on a new layer above the installed part layers but they still go behind the installed layers when dragged.
Is there a way to ensure that dragged images are always on top?
7 Replies
Hello Ray,
The only thing that I can think of, that could make the image disappear is due to a state change.
As seen on the second tutorial:
https://community.articulate.com/series/107/articles/articulate-storyline-360-tutorial-how-to-create-a-drag-and-drop-interaction
I tried playing around with mine with different layers as well and none of them does the same behavior as yours.
As default it should still show on top unless there is a setting that tells it otherwise.
Feel free to post your course here and I will take a look at it and see what's causing this.
Hope to hear from you soon
Hello Chino,
the dragged computer part image is made to hide on purpose after it is dropped on the target. Once it is dropped, a layer containing an image of the installed part is shown. The problem is that when a new part is being dragged to another target on the base image it moves underneath the part images that have already been shown - even when the dragged part is on a layer above the installed part (see attached image)
I also tried placing the targets on a layer above the installed image layers, thinking that Storyline might be changing the Z-index of the dragged object to match the target (or be 1 level above it). But it seems that shown layers are always higher than the dragged object regardless of the layer the dragged object is on. Not what you'd expect.
Hi Ray,
Could you share the .story file for this project (even just this one slide) that way we can see how everything is layered on the slide timeline and the layer itself? You can share it here using the "Add Attachment" button at the bottom of the reply window or feel free to send it along to our Support team here.
Sure. There are two slides. The first has the dragged objects on the base layer. The second has the dragged objects and targets on layers above the "installed part" layers - so theoretically they should move on top of those images if the layer is shown.
Hi there Ray! This one was a puzzle, for sure. I had an idea to use hidden states rather than layers, and I think I've got it working the way you'd like it to work. Have a look at this quick video which explains the changes I made to your file, and let me know if you have any questions!
Thanks Alyssa. I can make this work. It is puzzling that the dragged object in the original version moves underneath images on layers even though it is itself on the top layer.
That's awesome Alyssa, glad to see that you got the issue addressed.
If you need anything else Ray, never hesitate to reach out again, our community is always here ready to help.
Have fun and happy course making!
This discussion is closed. You can start a new discussion or contact Articulate Support.