Highlighted

Drag and Drop targets misaligned

Explorer ,
Jan 10, 2020

Copy link to clipboard

Copied

I have created a drag-and-drop interaction on a slide, and when I preview it in html5, the targets are misaligned. If I drop a shape directly on its intended target, it snaps back to its original position. In order to get the shape to land on its target, I have to drop it just to the left of the target. If I drop it to the left, it snaps onto the center of the target, right where I initially tried to drop it! Obviously, this would be aggrivating for users and look unprofessional, but worse, my targets are lined up in a row, so having to drop an object to the left of its intended target means having to drop it on the adjacent incorrect target in order to get it to land on the correct one. 

 

Any idea why it's doing this or how to correct it?

 

Many thanks!

-BSR-

Most Valuable Participant
Correct answer by Lilybiri | Most Valuable Participant

These objects seem to be images? Those images have been created with a size whichis bigger than the ellipse, hence that big bounding box which is the real cause of your issues. I wrongly supposed those were shapes, in that case the bounding box would have touched the ellips.  You could try to crop the images so that this is the case.

As for the hit area padding, select a drop target;

Padding.PNG

 

TOPICS
Advanced, Getting started

Views

327

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

Drag and Drop targets misaligned

Explorer ,
Jan 10, 2020

Copy link to clipboard

Copied

I have created a drag-and-drop interaction on a slide, and when I preview it in html5, the targets are misaligned. If I drop a shape directly on its intended target, it snaps back to its original position. In order to get the shape to land on its target, I have to drop it just to the left of the target. If I drop it to the left, it snaps onto the center of the target, right where I initially tried to drop it! Obviously, this would be aggrivating for users and look unprofessional, but worse, my targets are lined up in a row, so having to drop an object to the left of its intended target means having to drop it on the adjacent incorrect target in order to get it to land on the correct one. 

 

Any idea why it's doing this or how to correct it?

 

Many thanks!

-BSR-

Most Valuable Participant
Correct answer by Lilybiri | Most Valuable Participant

These objects seem to be images? Those images have been created with a size whichis bigger than the ellipse, hence that big bounding box which is the real cause of your issues. I wrongly supposed those were shapes, in that case the bounding box would have touched the ellips.  You could try to crop the images so that this is the case.

As for the hit area padding, select a drop target;

Padding.PNG

 

TOPICS
Advanced, Getting started

Views

328

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
Jan 10, 2020 0
Explorer ,
Jan 10, 2020

Copy link to clipboard

Copied

May I know which version of captivate are you using? 

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
Reply
Loading...
Jan 10, 2020 0
Most Valuable Participant ,
Jan 11, 2020

Copy link to clipboard

Copied

Are you talking about a responsive or a non-responsive project? Can you post a screenshot of the Snap Properties of the drop targets?

Default setup is: centerpoint bounding box of the drag source snaps to the centerpoint of the bounding box of the drop target. 

Exact version number (maybe you are on a not-patched version) and OS, please? You find the full version number under Help, About Captivate.

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
Reply
Loading...
Jan 11, 2020 0
Explorer ,
Jan 13, 2020

Copy link to clipboard

Copied

I'm using 10.0.0.192 (2017).

I made the drag-and-drop with the interaction tool. I did see that the destination mapping arrow snapped to the center of each target (as expected). Now I don't know how to get back to the view with the arrows, though, to show you that they really did point to the centers of the targets. Below is the screen cap of the slide. The ovals on the codon dictionary table are the dragable elements, and the row of boxes across the top are the targets.

 

 
 

Capture.PNG

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
Reply
Loading...
Jan 13, 2020 0
Explorer ,
Jan 13, 2020

Copy link to clipboard

Copied

Ah, and here is the snap property screen with one of the targets highlighted...

Capture.PNG

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
Reply
Loading...
Jan 13, 2020 0
Explorer ,
Jan 13, 2020

Copy link to clipboard

Copied

And here is the behavior...

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
Reply
Loading...
Jan 13, 2020 0
Most Valuable Participant ,
Jan 14, 2020

Copy link to clipboard

Copied

Only situation where I did see such a behavior is when the bounding boxes overlap - in this case for the drop targets. Do you have set a padding? Can you try to leave more space between the drop targets?

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
Reply
Loading...
Jan 14, 2020 0
Explorer ,
Jan 14, 2020

Copy link to clipboard

Copied

Thanks so much for the lead! I don't have a lot of room to spread them out, but I will play with this and see what happens. Is there a way to crop the bounding boxes so that they are closer to the size of the actual shape? That would help a lot! (Building a chain is actually part of the concept here, so even if I had the space on the slide, I wouldn't want to separate them out so much that it loses the visual effect of the chain.)

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
Reply
Loading...
Jan 14, 2020 0
Most Valuable Participant ,
Jan 14, 2020

Copy link to clipboard

Copied

You have no control over the bounding boxes at all. Sorry...

As for the chain, why not have 'lines' to link the drop targets, which are not part of the D&D 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
Reply
Loading...
Jan 14, 2020 0
Explorer ,
Jan 16, 2020

Copy link to clipboard

Copied

Okay, I tried shrinking the targets a little bit and spreading them out, so now the bounding boxes don't overlap. At first, I thought it was significantly improved: I still had to drop a little to the left of center in order to get the shape to land on the target, but close enough!

 

But then, I kept going down the row, and it got even worse. One of the boxes behaved the opposite of the others, and I had to drop slightly right-of-center (no big deal), and then the second-to-last target would not work at all. I've pasted a screen cap and video below, showing that (1a) the target bounding boxes don't overlap, (1b) the malfunctioning target is a target, and (2) the mapped object won't land on the 2nd to last target, no matter where it's released. 

 

In my frustration, I tried deleting the interactive altogether and starting over: I re-mapped everything and reset the action attributes, and ... exact same behavior. I noticed when I was doing this that the drop object bounding boxes were much larger than the objects themselves. Would the overlapping cause problems on the drag item side of the equation? and if so, how do I get rid of the excess bounding box area? There is no way I can spread the targets out far enough to account for the excessive margins on the drag item boxes.

 

For reference, this interactive was working after making it with an earlier version of Captivate. I only set about editing it because the interactive wasn't html5 compatible, so this is an issue with the newer version of the drag-and-drop tool. These exact same shapes were working fine with the old widget.

 

Capture_boundingboxes.PNGCapture_boundingbox_cca.PNG

 

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
Reply
Loading...
Jan 16, 2020 0
Most Valuable Participant ,
Jan 16, 2020

Copy link to clipboard

Copied

You have a problem, I never did see this myself. Can you show a screenshot with some of the objects selected so that I can see those bounding boxes?

I asked before, but never did see an answer: what about the padding setting?

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
Reply
Loading...
Jan 16, 2020 0
Explorer ,
Jan 16, 2020

Copy link to clipboard

Copied

Sure thing ... screen shot below. Where do I look to see what padding has been set? It isn't showing up under style or options for the object properties. (Sorry for not having ready answers to what should be easy questions - an instructional designer originally created this file for me, and then moved on from that position; now I'm 4 IDs and 3 versions of Captivate later, and it's quite a breadcrumb trail!)

 

Capture_dragobjects.PNG

 

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
Reply
Loading...
Jan 16, 2020 0
Most Valuable Participant ,
Jan 16, 2020

Copy link to clipboard

Copied

These objects seem to be images? Those images have been created with a size whichis bigger than the ellipse, hence that big bounding box which is the real cause of your issues. I wrongly supposed those were shapes, in that case the bounding box would have touched the ellips.  You could try to crop the images so that this is the case.

As for the hit area padding, select a drop target;

Padding.PNG

 

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
Reply
Loading...
Jan 16, 2020 0
Explorer ,
Jan 17, 2020

Copy link to clipboard

Copied

Thank you, Lilybiri... the image files were the key!

 

We weren't able to edit them within Captivate (not even with my IT guy's help), so I ended up just recreating them all, saving them into a file, replacing them in the library one by one, then adjusting sizes one by one. Slow, but successful. The whole thing is working correctly now!

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
Reply
Loading...
Jan 17, 2020 0
Lilybiri LATEST
Most Valuable Participant ,
Jan 17, 2020

Copy link to clipboard

Copied

Why did you not use a simple ellips shape which can be filled with anything?

When you go into the Edit Image dialog box, you are able to crop the image.I am very astonished that you couldn't do that.

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
Reply
Loading...
Jan 17, 2020 0