Snap options for Drag-n-Drops in Storyline

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.

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:

1. Setup the object that you want to be destination for the drop items, but DO NOT set these objects up as the drop targets.
2. Create a separate set of drop targets that are offset from the actual objects in step #1. Set those to be the official Drop Targets. You can use regular or custom shapes for this, and set them to have no fill and no outline.
3. in the Form view, designate the correct Drop Items to match with the Drop Targets in Step #2.
4. Go into Preview to test if the offset distance is correct. Adjust the boundaries of the Drop target shapes and repeat the Preview process until it drops the item at the correct distance. So for example, if the drop offset is too close, move the Drop Target shape further away from the "real" drop object from Step #1.

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.