Snap options for Drag-n-Drops in Storyline
Jul 22, 2013
By
Jeff Clay
Is it possible to control where an object snaps to, if correct? I have a quiz slide where if the answer snaps to the middle of the target, half of it is offscreen. I'd like the answers to either snap to the side of the object or snap to a specific area.
I haven't been able to find any descriptions/tutorials of the other choices in the drag and drop quiz slide. How do the following choices affect the snapping feature and are they adjustable (can you change where an object snaps to)?
Tile
Stack Random
Stack Offset
Free
Thanks!
Jeff
14 Replies
Hi Jeff,
The location of where an object snaps to will be determine by what the drop target is and how you set up the drop target options. You'll find directions here on how to set it up.
Tile - will drop on top of your target so that just the corner edge is showing, kind of like fanning out a deck of cards.
Stack Random - will have the object appear on the target, but in no particular location.
Stack offset - will have the object appear on top of the target, offset just to the right a bit
Free - will place the object on top of the target wherever the user lets it go
Snap to center - place the center of the object over the center of the target
Based on what you're describing, I think Free or Stack offset will fit your needs.
Whatever you select will apply to all the items on that slide. If you'd like to customize it further than that, you'll need to put in a feature request.
Hi Ashely, thanks very much for the comments.
i've been testing out the different options, however, and they don't seem to work that way. (unless I'm doing something wrong) The only setting where the objects actually "snap" is the Snap to Center option.
For the other options, the dragged objects don't seem to behave the way they should.
Tile: Objects didn't "snap" at all, just stayed where dropped.
Stack Random: Objects snapped to center.
Stack Offset: Objects didn't "snap", stayed where dropped.
Free: Same...no snapping.
I've tested this slide using hotspots, shapes and images as the drop targets, in case that had any effect and the results were the same.
I went ahead and created a simple drag and drop, with one frame set for each snap option. (see attached file) You can see that the only ones that actually "snap" are Snap to Center and Stack Random. The others don't snap at all. Tile, Stack Offset and Free all seem to do the exact same thing. The only other difference with Stack Offset, is that it does put the target object on top, not sure why.
All the same, thanks for the help. If anyone can figure this out, I'd love to hear responses.
Thanks.
Jeff
Hi Jeff,
Thanks for sharing the example. It seems that how you set up the example everything is working the way it is designed to work. The tile and stack random are really designed for multiple drag items are dropped onto one drop target. Snapping something to the side of a drop target is also not possible, but as you mentioned using a hotspot might work. If you create a large hotspot that will act as the actual drop target, and the center is to the side of the intended drop target from the users perspective (yet still covers it) when the user drags an object to the target, you can set it to snap to the center of the hotspot which will appear next to the target.
I made a basic example of what I'm talking about and attached it here.
Hope that helps!
Hi Jeff & Ashley,
I know this was a year ago, but I'm having the same issue. The file with the drag/drop here has different heights to each drag item and it looks silly when they all snap to center on the drop items. It leave a large amount of space on top and below the drag item but it is centered in the middle horizontally.
Has there been any resolution to this?
thank you,
Darlene
Hi Darlene,
This thread is a bit older (used in SL1), but I'd be curious to know what you were looking to do? Do you have a sample file you could share here or a bit more information about the set up you'd like to see?
I can't post a sample file because this project is still on a NDA but I have a graphic here that explains it all. Thanks for your time.
Hi Darlene,
I'll defer to the community on this one since it'll involve some more customized behavior to ensure all the drop items appear at the top of the drop area and it could change based on the size of the drag item.
If you want to have an object snap to a more specific position you should make custom targets. Use an image editor to create transparant pngs. Determine the center of that png...thats where the dragobject will snap to. By creating a custom target you can specify an exact position for a draggable object.
Thanks for the tip, Math! Great idea for customizing that snap.
I came across this thread because I wanted to know how to control the amount of offset when an object is dragged and dropped on top of a drop target. There is no setting to type in the number of pixels to control how far off the offset should be if you are doing a direct drag and drop.
So if you are using "Stack Offset" as your Drop Target Option, then you will have to do the following to control the amount of offset:
This is an imperfect method because your drop items and targets may be of different shapes and on-screen arrangements. In my case, I had a list of terms and a list of symbols, so the alignments were pretty easy to do.
I once did a cheap version of this by snapping to center, then moving the target down on a motion path every time an item was dropped on it, The dropped items stack up from the top down, and look really good, until the user drags an item off the target, then it leaves a hole.
Greetings! I would like my Storyline drag-n-drop to function like the sorting activity in Rise 360, where the dragged items disappear when put on the correct drop pile. How do I do this in Storyline?
(the character limit was a problem in Rise 360).
Hello, Training.
I found a few discussions similar to what you're trying to do:
I hope this helps!