Table Drag & Drop

Interaction Specs

Interaction Specs: 
1. Use the Row Handle to Drag Drop.

To move a single row, start drag drop with a click on the row handle (gripper).

This changes the pointing cursor to a moving cursor. Click on the row handle (gripper) to drag the entire row.

2. Row highlights showing working area.

To move multiple row, click on the check boxes. Drag drop the row handle (gripper) to move all selected rows to desired location.

3. Use the handle to drag a row.

User will drag row 3 upward using the handle area. The spacing left behind row 3 is highlighted in dark blue background color.

4. Note the highlighted selection in blue.

When selections are dragged near allowed locations, the invitation to drop is indicated by a blue line (or outline) indicating the drop area.

5. Completed move is shown.

Table appearance after move is complete.

6. Drag and Drop column to reorder.

User should be able to reorder the column by dragging and dropping the column to a desired location.

While re-locating a column the destination target is visually indicated as a blue line placed in the space between the two columns.

Note: Columns used for selection (checkboxes or radio buttons) and row numbers (index) cannot be reordered.

Visual Specs

Visual Specs: 

Pattern Summary

Pattern Summary (Unity): 

Why Use This Pattern

For moving a single row, or multiple rows of data from one location in the table to another.

What is the Solution

Table Drag and Drop allows the data row, or rows to be manually moved from one placement in the rows to another. The (Gripper) row handle highlights the row that is selected for moving and while the row is in a moveable state.

When to Use This Pattern

When use of column headers to reorder a single row, or group of rows is not enough.

Do Not Use This Pattern

Other than for moving a row, or group of rows of data.


GUI Kit contains all Unity Light theme patterns in vector format

Adobe Illustrator Download 2.1 MB
Vector PDF Download 2.7 MB

Updated November 2015