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 and position, resize, and change its background color in the Properties palette to match our example.
  2. Use Text and Image widgets to create a header for your prototype. Ours reads “Manage Your Team: Just drag and drop”.
  3. Next, drag two Dynamic Panels to the Canvas and place them side by side. In the Properties palette, ensure that the Dynamic Panels have a vertical layout. These will be the two lists that the user can drag elements to and from.interactive-wireframes-sortable-list-1
  4. Double click on the left Dynamic Panel to edit its contents. 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.
  5. Finally, group the Rectangle and Image widgets together within the Dynamic Panel (right click on the selection of elements and select “Group”).
  6. Repeat Steps 4 and 5 the Dynamic Panel on the right, changing the styles as preferred.
  7. Now we’ll create the list items. First, drag another Rectangle widget into the left Dynamic Panel and resize it to match the Dynamic Panel’s width.

    Place an Image widget to display the contact’s avatar, and a Paragraph widget on top of the Rectangle. 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
  8. 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”. This event will make the list group draggable.interactive-wireframes-sortable-list-3
  9. With the Hotspot still selected, create an “On Drag Stop” + “Insert Into” event. In the dialog, click the gear icon to select the component to which the event relates and choose Panel 1. 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.interactive-wireframes-sortable-list-5
  10. With the Hotspot still selected, create another “On Drag Stop” + “Insert Into” event. In the dialog, click the gear icon to select the component to which the event relates and choose Panel 2. 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. These events will keep the list group in its target position.
  11. Repeat Steps 8-11 for all elements you wish to list. Remember to adjust the contact avatar, name and description each time.

That’s it! Click “Simulate” to interact with your prototype.

You can download our below here.