How to simulate a sortable list using drag and drop in your interactive wireframes
Learn how to simulate a sortable list with drag and drop events in your interactive wireframes in this tutorial.
Create a sortable, reorderable drag-and-drop list by making selected elements draggable by mouse and placing them in another position on the canvas. We use the ‘On Drag’ event to make elements draggable and the ‘On Drag Stop’ event will keep elements in their target position. Follow the steps below to reproduce our example.
You can download the example below here.
Create a sortable list in your interactive wireframes
1. Open a new web prototype and drag a rectangle to the canvas.
2. Position it, resize it and change its background color in the Properties tab to match our example.
3. Right click on the element in the Outline tab and from the Order options, choose ‘Send to Back’.
4. Use text and image widgets to create a header for your wireframe screen. As you will see, ours reads “Manage Your Team: Just drag and drop”.
5. Next, drag two dynamic panels to the canvas.
6. In the Properties tab, ensure that the dynamic panels are set to Vertical Layout, resize them to match our example (330 x 539 px to be precise) and place them side by side. These will be the two lists that the user can drag elements to and from.
7. Double click on the left dynamic panel to edit its contents.
8. To create the header of your list, drag a rectangle to top of it and resize it to match our example (330 x 69 pixels). Change its color as desired.
9. Drag an image widget to the dynamic panel and place it on top of the rectangle. Choose an image to be the list’s icon from your folders. Finally, group the rectangle and image widget together within the dynamic panel.
10. Repeat steps 8+9 for the right dynamic panel, changing the styles as preferred.
11. To create a list item in the left dynamic panel, we will create a group of elements. First, drag another rectangle to the left dynamic panel and resize it to match our example (330 x 63 pixels). Drag an image widget to display the contact’s avatar, place it on top of the rectangle on the left and choose am image file from your folders. Drag a paragraph widget and place it on top of the rectangle in the center. Enter the contact’s name and any other information you wish. Drag a hotspot widget, resize it so it’s the same size as the rectangle and place it directly on top of the rectangle, so that it is the top element. Finally, group these elements together.
12. Select the hotspot widget and go to the Events tab. Create an “On Drag” + “Move” event, selecting the entire group that contains the hotspot widget as the element to be moved. Below, set both positions to ‘With cursor’. Click OK. This event will make the list group draggable.
13. Add another event: “On Drag Stop” + “Insert Into”. From the central box, click the gear icon to select the component to which the event relates. Choose Panel 1 and click OK.
14. In the events dialog, select the hotspot’s group as the component you want to insert into another. Below, select Panel 1 as the component you want to insert it into. Click OK.
15. Add another event: “On Drag Stop” + “Insert Into” event. From the central box, click the gear icon to select the component to which the event relates. Choose Panel 2 and click OK.
16. In the event dialog, select the hotspot’s group as the component you want to insert into another. Below, select Panel 2 as the component you want to insert it into. Click OK. These events will keep the list group in its target position.
17. Repeat steps 11-16 for all elements you wish to list. Remember to adjust the contact avatar, name and description each time.