Triggering an action using only part of an image in drag and drop
Nov 11, 2021
Hi,
I'm trying to build an interactive computer repair tutorial demo. I've added a screwdriver icon so that the learner can drag and drop it to the right location to unscrew a piece of a laptop for removal.
My plan is that the user drags the screwdriver to the screws (covered with shapes - in yellow in the attached screenshot, but will be invisible. This is a Q&D demo), and triggering the action when the user drags the screwdriver over the shape. That part of it works. So far, so good.
My problem is this: The action triggers when any part of the screwdriver touches the shape, while I want the trigger to happen when the learner connects with the shape, but only with the tip of the screwdriver.
I've tried to add an invisible shape over the tip of the screwdriver, grouped it, and then tried to set the trigger to launch when the invisible shape meets the target shapes. However, I then can't drag the screwdriver any more.
Does anyone have an idea for this? I'm admittedly new to drag/drop functionality.
1 Reply
The attached sample may give you some ideas. The smaller the drop target is, the more exact the placement has to be. The problem is that making the drag item larger allows for less precision.
Slide 1 uses a manually created interaction, while slide 2 uses the built-in drag and drop. The blue circle is to help you find the target. The target will be changed to have a transparency of at least 96%.