Moving items between lists

Learn how to design a sortable list by moving items from one list to another in your Justinmind prototypes.

A user can select items from a list and move them to another list by clicking between the arrows, as shown in the example below:

moving items between lists

How to create a sortable list

To create a sortable list:

  1. In a new web prototype, drag two Multi-select widgets to the canvas. Position them to match our example.
    • multi select widgets
  2. Then, drag two Triangles to the canvas. Position and resize them to match our example.
    • triangles
  3. Select the Multi-select element on the left and go to the Properties palette.
    • Select the “Edit values” button and create the values you see in our example. Click “OK”.
  4. Select the Multi-select element on the right and go to the Properties palette.
    • Select the “Edit values” button and remove all the values. Click “OK”.
  5. Now select the left-facing Triangle and go to the Events palette.
    • Click the “Add Event” button and add an “On Click” + “Set Value” event, selecting the left Multi-select element.
    • Below, select the “Calculated” button and then click the “Add expression” link. The Expression builder will appear.
  6. Drag the left Multi-select element to the term in the Conditional expression. From the drop-down below this term, select the “all values” option.
    • Drag the “Add” (Data +) Function to the right in the Conditional expression.
    • Drag the right Multi-select element to the final term. Click “OK” twice.
  7. Back in the Events palette, click the gear icon next to the word “Do” and select “Add action”.
    • Create another “On Click” + “Set Value” event, selecting the right Multi-select element.
    • Below, select the “Calculated” button and then click the “Add expression” link. The Expression builder will appear.
  8. Drag the right Multi-select element to the term in the Conditional expression. From the drop-down below this term, select the “all values” option.
    • Drag the “Remove” (Data -) Function to the right in the Conditional expression.
    • Drag the right Multi-select element (again) to the final term.
    • Click “OK” twice.
  9. Back on the canvas, select the right-facing arrow and go to the Events palette. Click the “Add Event” button and an “On Click” + “Set Value” event, selecting the right Multi-select element.
    • Below, select the “Calculated” button and then click the “Add expression” link. The Expression builder will appear.
  10. Drag the right Multi-select element to the term in the Conditional expression. From the drop-down below this term, select the “all values” option.
    • Drag the “Add” (Data +) Function to the right in the Conditional expression.
    • Drag the left Multi-select element to the final term.
    • Click “OK” twice.
  11. Back in the Events palette, click the gear icon next to the word “Do” and select “Add action”.
    • Create another “On Click” + “Set Value” event, selecting the left Multi-select element.
    • Below, select the “Calculated” button and then click the “Add expression” link. The Expression builder will appear.
  12. Drag the left Multi-select element to the term in the Conditional expression. From the drop-down below this term, select the “all values” option.
    • Drag the “Remove” (Data -) Function to the right in the Conditional expression.
    • Drag the left Multi-select element (again) to the final term.
    • Click “OK” twice.
  13. Click “Simulate” to view and interact with your lists.

You can download our example here.