I'm creating a drag and drop interaction where the user drops an item into a trash can. The item is dropped onto a hotspot and then using motion path drops down behind the trash can image.
Currently I have the drop object and hotspot set up behind (further down the timeline) the trash can.
I've got the motion path working but the drop item keeps moving in front of the trash can instead of behind it. Any suggestions why this might be?
I had considered this and it will probably be my fallback but I'd prefer a smoother transition as the state change can be quite jarring - I'd worry the learner might think there was a bug. I tried applying animations to the state change but it did not work.
Hopefully the community can chime in and share their tips, as well. It might be helpful if you could attach a sample slide so they can see what you've got set up so far.
I'm having a similar but different problem. I'm wanting the top most drag & drop object set by "reveal drag items one at a time" to be in the foreground of the drop zone items. However it seems like the target zone objects are given foreground status regardless of any other settings. I would have thought that the top most item to drag & drop would be given foreground status. Any suggestions? Not sure if this is just a limitation of the feature or my lack of knowhow.
Hi there, Paul. We have an open issue with drop targets and dropped items appearing on top even with other objects are higher in the timeline. I'm adding this discussion to our report so we can let you know of any changes!
Here's my prototype of drag and drop simulation where the dropped object animates behind. :) I called this fancy drag and drop. If this is Flash, I can control the SwapDepths and have a smooth animation.
This is still an open issue as we prioritize other issues and features. I'm going to add your voice to the report. If there's any news regarding this bug, this conversation will be updated.
These lines of Javascript code do the trick... let card = document.querySelector("[data-acc-text='c_sp10@3x.png']"); gsap.set(card, {css:{zIndex:100}})
Where you ofcourse need to take care that the zIndex given to a higher element...indeed is higher then the highest one on your stage. In this case there were 55 layers...so i could suffice with 56.
19 Replies
Hey Zoe!
Have you thought about changing the drag items states to Hidden when they are dropped on their correct drop targets? Here's the trigger you'll need:
Hi Alyssa, thank you for the reply.
I had considered this and it will probably be my fallback but I'd prefer a smoother transition as the state change can be quite jarring - I'd worry the learner might think there was a bug. I tried applying animations to the state change but it did not work.
Hopefully the community can chime in and share their tips, as well. It might be helpful if you could attach a sample slide so they can see what you've got set up so far.
I'm having a similar but different problem. I'm wanting the top most drag & drop object set by "reveal drag items one at a time" to be in the foreground of the drop zone items. However it seems like the target zone objects are given foreground status regardless of any other settings. I would have thought that the top most item to drag & drop would be given foreground status. Any suggestions? Not sure if this is just a limitation of the feature or my lack of knowhow.
Hi there, Paul. We have an open issue with drop targets and dropped items appearing on top even with other objects are higher in the timeline. I'm adding this discussion to our report so we can let you know of any changes!
Thanks, Crystal! I too am experiencing this issue.
I know how to do this! Can anyone hold my beer so I have two hands working on this? ;)
Hello Ben and welcome to E-Learning Heroes :)
You're in the right place to be notified of updates we have to share regarding this.
Thanks, Daniel! It's five o'clock somewhere and I look forward to seeing your solution.
Hi,
Here's my prototype of drag and drop simulation where the dropped object animates behind. :) I called this fancy drag and drop. If this is Flash, I can control the SwapDepths and have a smooth animation.
Hope this helps.
Hi there, I take it this issue is still present (drop targets and items appearing on top regardless)?
I am certainly seeing it in storyline 360 still.
Hi Ewan,
You are correct. This issue is still open with our team, but this conversation is attached so that we can share any updates with you here.
Thank you so much for this! It's awesome and has been a great help to me.
Hello everyone,
I'm encountering the same issue with the latest version of Storyline. Has the issue been resolved since 2020?
With Javascript you can change the z-index of elements so they go into a lower depth as before... or higher if wanted...
Hi Anna,
This is still an open issue as we prioritize other issues and features. I'm going to add your voice to the report. If there's any news regarding this bug, this conversation will be updated.
Thanks for letting us know about this!
Hi Math,
Thanks for your answer, although I don't know JS.
I'm looking on others discussions to find how to do it.
Have a nice day,
I do have a sample on the forum somewhere that shows a card flip. If im not mistaken that one also has zIndex change in it.
Although this is a simple sample where a click brings an element to a higher z-index and thus shows upfront... this concept can be used in Drag and Drop scenarios too.
https://360.articulate.com/review/content/1a7a1a7e-3562-431a-9d0f-f08d477f0674/review
These lines of Javascript code do the trick...
let card = document.querySelector("[data-acc-text='c_sp10@3x.png']");gsap.set(card, {css:{zIndex:100}})Where you ofcourse need to take care that the zIndex given to a higher element...indeed is higher then the highest one on your stage. In this case there were 55 layers...so i could suffice with 56.
Thank you! I will try it :)