I'm trying to create a drag-and-drop interaction where the learner puts a hat on a head and a layer shows up. I have four hats and layers, so I want each hat to return to the starting position when another is clicked to be dragged. Does anyone have any suggestions? I tried using a motion path, but that just made every hat always move... which wasn't exactly what I was looking for.
Maybe someone can come up with a better solution, but I found something that works sort of OK. I set the slide to reset its initial state on revisiting. Then I added a trigger for each hat that jumps to the slide itself when the user hovers over it. What that means is that each time you roll over a new hat, the slide resets itself back to the initial state. Mouse is still in place, so the hat can be dragged to the head.
It's not as elegant as clicking on the hat in order to reset it, but it does return the hats to their original positions.
An alternative would be to add a close button to each layer, and not to let the user click on the base layer from the other layers. Then the close button would go to the slide itself, rather than hiding the layer. The slide would still be set to reset to initial state on revisiting, which would have the effect of putting all the hats back to their original locations.
Thanks for your help. I woke up this morning with a renewed idea of your first comment. I did the "rest" trigger. You're right, it's not super pretty; it almost feels like a glitch, but it gets the job done!
I think I will give your "close button" suggestions a try next! Thanks again for sharing your ideas and input. :)
Thanks for your help. I woke up this morning with a renewed idea of your first comment. I did the "rest" trigger. You're right, it's not super pretty; it almost feels like a glitch, but it gets the job done!
I think I will give your "close button" suggestions a try next! Thanks again for sharing your ideas and input. :)
Here is a sample that uses a pick one interaction to return incorrect drops to their original spots. The different slides return while you watch, when dropped, or when you click submit.
5 Replies
Hi Dakota,
Maybe someone can come up with a better solution, but I found something that works sort of OK. I set the slide to reset its initial state on revisiting. Then I added a trigger for each hat that jumps to the slide itself when the user hovers over it. What that means is that each time you roll over a new hat, the slide resets itself back to the initial state. Mouse is still in place, so the hat can be dragged to the head.
It's not as elegant as clicking on the hat in order to reset it, but it does return the hats to their original positions.
An alternative would be to add a close button to each layer, and not to let the user click on the base layer from the other layers. Then the close button would go to the slide itself, rather than hiding the layer. The slide would still be set to reset to initial state on revisiting, which would have the effect of putting all the hats back to their original locations.
This post was removed by the author
Hi David,
Thanks for your help. I woke up this morning with a renewed idea of your first comment. I did the "rest" trigger. You're right, it's not super pretty; it almost feels like a glitch, but it gets the job done!
I think I will give your "close button" suggestions a try next! Thanks again for sharing your ideas and input. :)
Hi David,
Thanks for your help. I woke up this morning with a renewed idea of your first comment. I did the "rest" trigger. You're right, it's not super pretty; it almost feels like a glitch, but it gets the job done!
I think I will give your "close button" suggestions a try next! Thanks again for sharing your ideas and input. :)
Here is a sample that uses a pick one interaction to return incorrect drops to their original spots. The different slides return while you watch, when dropped, or when you click submit.