Spinning the image from the list to the rectangle

Hello everyone,
These are my first steps in this program.
Sorry for my English. I will try to make it understandable. I would like one of the pictures from the list to be dragged to the rectangle next to it. I would like this picture to stay there. Then, I would like to be able to move this image to the original location.
Is it possible?

Thanks a bunch.


Yes, this is possible. What you are describing will require a bit of interaction code which might be a bit advanced for your first prototype in Axure, depending on your programming experience. Fortunately, Axure Support has a learning tutorial for this basic drag & drop behavior here: https://www.axure.com/support/training/drag-drop-tutorial

Basic steps:

  1. Convert your image to a Dynamic Panel (dp). This will allow it to be dragged with the OnDrag event.

  2. Store the original position of the dp to allow image to be moved back. You can use the OnLoad event to store the .x and .y attributes, e.g., [[This.x]]. Use either global variables or text widgets hidden in the dynamic panel itself. See this reference page: https://www.axure.com/support/reference/variables

  3. Use the drag behavior described in the tutorial above, replacing the trash can with your rectangle. Instead of hiding the image dp, move it to the top-left or center of the rectangle (depending on how big your rectangle is.

  4. To move the image dp back to its original location, use the x and y variables stored in step 1. You can use the “fx” buttons in the “move” command to specify the global variables or text widgets used to store these values. Use the “Animate” setting to show the image moving, or leave that blank to have it immediately pop back to the original location.

A few years ago I created a library of widgets to document interaction designs and it used this basic drag & drop behavior. I added a placeholder rectangle to use as a target, as you describe, Take a look at this file:
drag drop image.rp (69.8 KB)

1 Like