Upvote 1

Create new item when menu option is clicked

Answered Dadowns1159 3 years ago

Hey Everyone,

I am hoping you can help me out with how to best go about creating a particular prototype.

Goal: Allow the user to drag new boxes onto a page by dragging from a menu toolbar.

Example: Page is blank other than a horizontal row of icons at the top. User can initiate drag on a menu item which will cause a box to appear on the screen; that box can be dragged to a particular location in the page and dropped there. If the user initiates a new drag event from the same menu option, they get a second box which they can place on the page.

Replies (1)

Something like the attached example sounds like what you're looking for. Unfortunately you won't be able to add an unlimited amount of rectangles - you'll need to add as many rectangles as you'll want to use to the prototype to the Canvas. Here's how it works:

Place a rectangle onto the Canvas on top of the icons, and give it a transparent background. On the bottom of the screen (or wherever you'd like the rectangles to be placed when you drag them), add a Dynamic Panel. Give that dynamic panel a horizontal layout and add some horizontal and vertical spacing to it.

1. Select the rectangle and look to the Events palette. Create an On Drag + Move event. You'll see a two dropdowns appear below where you can define where the rectangle should move. For both the X (horizontal) and Y (vertical) movements, select 'Move with cursor'. Click 'OK' to finish building the event.

2. Right-click on the action you just created in the Events palette and select 'add action after selected'. Create an On Drag + Change Style event. For the style to change, change the rectangle's background color to something not transparent. Click 'OK' to finish building the event.

3. Click the '+' button in the Events palette to create a new event. Choose an On Drag Stop trigger. For the drag target (that new field that appear after you choose that trigger), choose the dynamic panel. Next, choose an Insert Into action, and have the rectangle be inserted into the dynamic panel. Click 'OK' to finish building the event.

4. Click the '+' button in the Events palette to create a new interaction. Create another On Drag Stop trigger but leave the drag target empty this time. Choose a Change Style action, and change the rectangle's background color back to transparent.

5. Right-click on that action you just created and select 'add action after selected'. Still with the On Drag Stop trigger, choose a Move action. By default, its current position should be listed, so just click 'OK' to finish building the event.

6. Click the 'add condition' text over the On Drag Stop actions you just created in the Events palette. Drag the rectangle into the open space in the expression. Drag the Intersect function next to the rectangle. Drag the dynamic panel into the open space that appears in the expression. Finally, drag the Not function in front of this expression.

This condition checks to see if the rectangle is intersecting the area of the dynamic panel. If it doesn't intersect, it'll move the rectangle back to its original position and then change its color back to transparent.

Copy and paste those events to all the other rectangles you'd like to add. Hope this is helpful! Please let me know if you have any questions.

Leave a Comment
Attach a file