Drag and drop elements between lists

With Justinmind, you can create a sortable list with drag and drop events. We will use “On Drag” events to make elements draggable and the “On Drag Stop” event to keep elements in their target position. 

 

Sorted-lists-anim

To create a sortable list in your prototype, follow the steps below:

  1. Create a new web prototype and drag a Rectangle to the canvas.
  2. Position it, resize it and change its background color in the Properties palette to match our example.
  3. Right click on the Rectangle in the Outline palette and from the Order options, choose “Send to Back”.
  4. Use Text and Image widgets to create a header for your prototype. Ours reads “Manage Your Team: Just drag and drop”.
  5. Next, drag two Dynamic Panels to the canvas.
  6. In the Properties palette, ensure that the dynamic panels have a vertical layout.
    • Resize them to match our example (330 x 539 px) and place them side by side. These will be the two lists that the user can drag elements to and from.
    • interactive-wireframes-sortable-list-1
  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 widgets together within the Dynamic Panel (right click on the selection of elements and select “Group”).
  10. Repeat steps eight and nine for the right Dynamic Panel, changing the styles as preferred.
  11. To create a list item in the left Dynamic Panel, 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 an 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.
    • interactive-wireframes-sortable-list-2
  12. Select the Hotspot widget and go to the Events palette. 
    • 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.
    • interactive-wireframes-sortable-list-3
  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”.
    • interactive-wireframes-sortable-list-4
  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”.
    • interactive-wireframes-sortable-list-5
  15. 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 2 and click “OK”.
  16. In the Events 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.

You can download our below here.