Draggable layers

Feb 15, 2019

Hi I was wondering if there was any way to make different layers be draggable. So if I create a slide with a number of different layers that are revealed when buttons are clicked and have their own close buttons to hide them, can I make it so the user can drag those layers to the side while they interact with other elements of the slide? I've searched through your forums a bit and haven't been able to find anything to help.

16 Replies
John D

It's not very pretty but I just drew something up that might help you visualise what I'm going for.

In image 1 there's a blue button and a lot of interactions all over the slide, represented by the pink squares. When the user clicks on the blue button, a green box appears as a new layer, as seen in image 2. This box contains reference materials for the user to check out while interacting with the pink squares. Is there a way to get this green box to be able to be dragged around to different parts of the screen as the user feels like it, as shown in images 3 & 4 so they can refer to the information while they interact with the pink squares?

In the final thing I'd like to be able to make there could be several "green boxes" opened at once that would need to be able to be dragged about.

Crystal Horn

Hi there, John.  You can't drag layers, but you can drag objects on a slide.  To make them draggable, you'll just need some triggers to identify what happens when the item is dragged over an object and dropped on an object.

Without more work than it's worth, you won't be able to let the user drop the object just anywhere, but you could identify some zones where the object can be moved.  Check out my simple example here.

I've attached the source file so you can see how I set that up.  I hope that gets the wheels turning!

John D

Thanks Crystal and Michael,

Your comments have helped me get to almost what I'm trying to do. I created a test file with 4 buttons and 4 pop-ups and I can successfully drag them around the screen and close them. I am still having one issue that that hopefully you can help me with.

The pop-ups consist of a group with a rectangle and a close button. Both these objects have initial state of Hidden. When the button is pressed both shapes states are set to Normal (I can't seem to control the state of a whole group) when the close button is clicked on a pop-up both objects states are set to Hidden.

To create the drag ability, I created a hotspot that fills the entire page and put it underneath all the elements. I set each Group to change the state of it's own rectangle to Normal when the user drops the group into the hotspot. To allow me to have the pop-ups placed wherever the user likes on the screen I right clicked on the hotspot and set Drag and Drop to "Free."

All of this seems to work perfectly but my one issue is that as you drag the objects about the screen, they sometimes end up with the buttons sitting on top of them and covering up the objects. How can i make sure the buttons stay on layers below the pop-up objects? This isn't an issue with the text object I have on the screen so I'm guessing it's only happening to objects that have triggers on them. I tried making it so that the buttons are hidden when the pop-ups are opened and reappear when closed but the buttons of the closed pop-ups still like to jump on top from time to time when dragging around. All buttons are below the groups in layers on the timeline.

I'll attach a copy of the story file here so you can test it and see what I mean and maybe get an idea of how to fix the issue. Also feel free to send me any feedback on other ways I can improve on this, maybe for instance if there is a way of changing group states to cut down on the number of triggers involved for the same results.

Michael Hinze

In your original post, you had asked about "layers". Your sample file doesn't actually have the popups on slide layers. In the attached file, I adjusted the popup 1, so that it is on an a layer, which automatically puts it on top of the baselayer objects. Have a look and see if that works better. If yes, then you could revise the other three popups in a similar way.

John D

Thanks for the quick reply. I won't have time to properly look over what you've sent today but, from what you've posted, it sounds like you might have the solution I'm looking for and that it might even be able to cut down on some of the triggers if it works the way I'm thinking it might. I'll have a look and play about with it tomorrow and let you know how I get on.

John D

So I've tried your suggestion, Micheal. I went into your file and tried to recreate what you did with the other 3 pop-ups. I like that you have the hotspot outside of the frame and the drag function still works. I set the layer properties to not Hide other slide layers too.

Still having an issue though, it's probably something small I'm just not seeing, but on my new layers, when I drag the group, it snaps back to where it started rather than being left where the user wants. It works on the layer 1 that you made but it's just not working on the new ones I made and the settings I have all look the same to me. Wondering if you're able to see where I've went wrong, I attached my new version here.

Another thing I'd quite like is if there's a way of making the layer with the last clicked on group to be the one that's on top. It is while you have the mouse button pressed but as soon as you let go it goes back to the preset layer order.

John D

Thanks Michael, I have it working now. Was Drag Return selected when you opened the file? For some reason for me it wasn't selected on any of the groups, but when I tried it there I selected it then unselected it again and it worked fine. Oh well, it's all working now, thanks for the help. I guess if the user wants a certain pop-up on the top they can click on the button again, though that's maybe a bit much to explain in the instructions.

John D

An extra note that I found when testing it there is that if you drag the group outside the frame towards the hotspot and it hits the hotspot it disappears towards it so I would recommend putting the hotspot far enough away that the group is too small to reach it. This has the added benefit of snapping the group to within the frame if you place it outside.