Simulating stretching of a wire in Drag and Drop

Hi Jay,

I don't know if that is possible in storyline yet. I would like to suggest a work around.

Instead of having them to drag the wire to the port, you can give them option of clicking the correct port. on this port, you put an hot spot that jumps to another slide or layer that shows the animated wire moving by itself to the port (motion path animation can be used).

so this is what you might have:

Slide 1.

What is seen on the screen: The device as shown with markers on different ports

Voice over or On screen text (OST): Click on the correct port or associated marker to insert the "name of wire"

Tirgger: Jump to next slide (or next layer as you wish) if "the correct port or marker" is clicked

Slide 2.

What is seen: The wire moves up (motion path) to the correct port.

Hi Jay,

I can't think of another way to ensure it stays anchored - but based on just your images alone, could you just set the object itself to be longer and therefore appear while below the slide stage so that when it is dragged the user can see more of the wire connected to it? It's a simplistic solution for sure - so I'd defer to the community experts on further design ideas. 

Ashley's method of making it longer and placing most of it below the stage is a pretty great way to get this effect and its very simple, a win-win.

If that doesn't work for you though, here are some ways of using stages and lines to simulate a line extending (drawing lines and boxes in this case).

I always go with the simplest...I figure life is already hard enough. :-)  

Thank you all for each of your suggestions, and for the demo file as well.

I did like Ademola's idea of using motion paths  (like putting those motion paths to use ;-)

Believe I'll just do the simplest way, using the elongated wire image.  Was thinking about doing it with states for so long that I didn't even see that as an option until now  :-)

The only thing with that is that any part of the wire could be dragged onto the drop area (when only the tip really needs to connect - don't think there's a way to define just a point of an image to register as the "drop point"),

Though it may just do the trick. Again, thanks.

Hi Jay,

Glad simple will work for you as well - having the way to define just a point for the drop would be a great upgrade to the current behavior. You may want to share your thoughts in the form of a feature request here. 

I didn't look at the other examples, but I did something similar that might help.

This is going to sound confusing, but don't make the image the drag object. Create a different shape and make that the drag object. Make the drag object about the same size as the drop object.  Then in the normal state place the image of the long wire and line it up where you want it connected to.

If you look at the image here, you can get an idea what I'm talking about.

The selected square on the spoon is just the image of the spoon inside the normal state of the square so they are one object. This is my drag object.  

The square on the hand is the drop object. 

I lined up the spoon image on the drag object so that when a user drags the spoon to the hand it always snaps to both shapes over each other.  

The shapes are just squares with no border and transparency set to 100% (don't set it to no fill).

For you case, just create a shape the same size of your drop point and then paste the image you used for state 4 into the normal state.  

If you have any questions just respond here or PM me. 

Thanks so much Jerson, for sharing your idea!  That "invisible" box idea is actually what I ended up using to have the ends of the wires to connect with the drop target to show "correct" feedback (instead of having the whole length of wire be able to be dropped on the drop target).

There was still a small issue with using larger/longer images like this for drag items. They had random behavior and when dropped around different points on the screen (which weren't the target)  they would randomly jump and "snap" to the top of the screen, etc., instead of staying put where dropped.

This was just solved by doing a workaround and checking the box for "return item to start point if dropped outside.. drop target", and the box for "snap dropped items to drop target".  Not really an ideal fix, but it keeps the longer image drag items to keep from snapping to the top of the screen randomly anyway.  If anyone has any input to why the snap to the top like that, feel free to share.

In any case, thank you to all who shared your ideas! Much appreciated!