Drag and Drop with precise placement

Forum|Forum|4 years ago
November 29, 2021
3 replies
1444 views

Hello,

I am trying to create a drag and drop Captivate 9 interaction where the end user not only has to choose the correct answer but also has to position it in a very specific spot.

In our manufacturing environment we have parts that are run through machines and the parts are controlled by rollers. It is important for our end users to know which color roller to use in which situation as well as know the precise placement of the rollers. What I am trying to create is a drag and drop where the end user not only has to pick the correct color roller (light blue in this case) but place it precisely across from the already installed roller.

The rollers are images and I am having trouble creating the interaction so that the user must place a specific part of the roller in a very specific place. The user needs to grab the light blue roller from the right and place it perpenticular to the white rectangle and while also lining it up directly across the other roller.

The drag and drop target areas do not allow for precise placement. Any suggestions would be welcomed.

This topic has been closed for replies.

L

LexingtonKMnTAuthor

Participant

Attached is another screen grab. I need to have the end user take the blue roller on the right line up the very tip of the roller (marked with a small red circle) with the edge of the "part" or black triangle where the second red circle is. Only the very tip of the roller should touch the border of the "part". In other words it needs to be the mirror image of the blue roller that is already on the "part".

G

Gaanf

Inspiring

I created an example of the solution described in my post above, applied to your work case at hand. Unfortunately for some reason I'm not able to attch the Captivate project file here - always gets stripped out when I try to submit my post. If you're interested, send me a message through this community portal with your email address and I'll send it to you.

L

LexingtonKMnTAuthor

Participant

Great! Thank you!

Message incoming.

G

Gaanf

Inspiring

From looking at the image you attached I assume right now the big rectangle is your Drop Target, representing the whole area where a color roler could technically be positioned, right. If so, just leave that as a static object on the stage, but demote it from being a drop target. Instead create another invisible (transparent) shape which smaller dimensions (more or less same size as the color rollers) that is positioned where the correct color roller should go. Make that the effective drop target for the interaction.

If you even need more precision, in that the correct color roller really needs to sit EXACTLY aligned across the one already present, then things get more difficult. What you can do is add some more hidden drop targets - incorrect this time - around the correct one, just out of range of what would be considered correct. The interaction will report sucess if the correct drag sourse touches only the correct drop target, but none of the incorrect ones.

Check out the attached sample project file. It relates to this post, where the OP was looking for a solution to have their learners align two tents in a way the they'd be connected through some sort of tiny tunnel. It only reports sucess when the second tent (the drag source) is attached to the first in the exact right spot.