Overview
Any drag and drop container contains a drag handle within the container. By default, it’s placed on the left-hand side, proceeding the content. This provides ample affordance to the user that the item can be rearranged by dragging.
Interactive states
Draggable interface elements that can be arranged should follow these interactive states. The contents of the container may vary from feature to feature—so you may need to modify the base component to fit your needs.
Once the marketer long presses on the element that can be dragged, the container will enter the active state and can be repositioned within the list. As the item is moved through the list, the items should shift up or down to fill the displaced space. Once the item is released, it will sink back into the list and enter the focus state.
Guidelines
The drag and drop container and child content may vary across the product, but the interaction pattern remains consistent through each.
There is an additional property that includes buttons to move the active item to the bottom or top of the list (far-right of container in example). This should be considered for lists that can be unpredictably long—like the adjusting the priority of an embedded message campaigns amongst a large number of campaigns running concurrently.
Use cases
- reordering campaign priority
- reordering channel preference list in Studio for Channel Optimization
- reordering embedded message button order in template creation
- moving an item or folder on an index
- Ensure that the keyboard can be used to move elements
- Limit the height of the drag container so that items can be arranged without having to frequently vertically scroll the screen
- If the element contains a number of inputs or has a tall-height, collapse the element so the title is visible until it is placed in its new position
- modify the styles of the drag and drop container; this includes using custom icons for the drag handle or repositioning the handle within the container
- expose child inputs, or elements that aren't necessary while the container is being dragged—in most cases the title will suffice while it is in a "draggable" state
Content
- If referencing priority, be sure to include labels at the top of the lists to help inform the order
- If a number is included before the label of the container (current order for example), the number should be responsive and update immediately as the draggable item is placed in the new position. For example, moving an item from the third position (3 - Title) to the first position would update the number to 1 (1 - Title)
Accessibility
The library we use for drag and drop includes touch and keyboard functionality. You can read more about these accessibility extensions in the docs.