• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Drag and Drop with precise placement

Community Beginner ,
Nov 29, 2021 Nov 29, 2021

Copy link to clipboard

Copied

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.

Views

221

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2021 Nov 29, 2021

Copy link to clipboard

Copied

Drop targets in Captivate can usually be very accurate. 

 

Can you please show another screenshot but this time from Edit mode that shows the location and size of the drop target objects?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Nov 30, 2021 Nov 30, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 01, 2021 Dec 01, 2021

Copy link to clipboard

Copied

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".

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Dec 03, 2021 Dec 03, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 03, 2021 Dec 03, 2021

Copy link to clipboard

Copied

@Gaanf  Put it on CC storage and add a link?  Or do it in the eLearning community, where adding a cptx project is possible.

 

I had also tried it out, but it is very difficult to get the drag&drop action to be successful if you limit the success drop target to the smallest possible size (for a shape it is 4px). 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 03, 2021 Dec 03, 2021

Copy link to clipboard

Copied

Great!  Thank you!

Message incoming.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Dec 08, 2021 Dec 08, 2021

Copy link to clipboard

Copied

Sorry for the late response. I sent you an email.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Dec 08, 2021 Dec 08, 2021

Copy link to clipboard

Copied

Email bounced. Apparently your mail server rejected the attachment.

I wrote a blog post about this in the Adobe eLearning Community and attached the project file there. It's under review by the moderators now and should pop up when they are done, I'll post the link here as soon as it's published.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Dec 08, 2021 Dec 08, 2021

Copy link to clipboard

Copied

Here's the blog post:

https://elearning.adobe.com/2021/12/drag-and-drop-with-precise-placement/

You can download the project file from there.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 08, 2021 Dec 08, 2021

Copy link to clipboard

Copied

LATEST

Thanks!

 

Never thought to use non-answer areas like that.  Great idea!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines